Home > Developer > Web Develop
Second, CSS3 animation animation properties (can jump directly three, examples)This side does not elaborate on the two specific low advantages and disadvantages. Generally do 2D animation, you can use CSS3 transition or animation
//模板animation: name duration timing-function delay iteration-count direction fill-mode play-state;//实例animation: myAnimationName 2s linear 1s infinite forward;
Animation-name (required)//Specify the animation name Animation-duration (required)//time to complete the animation//value: Times (1s.2s ...) The default value is 0, which means there is no animation effect animation-timing-function (Common)//animation movement speed//value: Linear constant Ease (default) Variable speed (first slow, then fast, then slow) ease-in slow start ease-out low Speed end Ease-in-o UT slow start and End Cubic-bezier (n,n,n,n) in the Cubic-bezier function in its own value. The possible values are the values from 0 to 1 */animation-delay//animation at the delay interval before startup//value: Time default is 0animation-iteration-count (Common)//animation Number of plays/* Value: # default value 1 Infinite animation unlimited playback */animation-direction Whether to rotate the animation/* value in reverse: normal reverse reverse playback alternate The odd number of times (1, 3, 5 ...) is playing forward, in an even number of times (2, 4, 6 ...) reverse play alternate-reverse in odd number of times (1, 3, 5 ...) reverse play, in an even number of times (2, 4, 6 ...) forward playback */a Nimation-fill-mode (Common)//when the animation does not play when the animation is complete. In what state/* Value: NonE default, after playing the animation, the screen stops at the starting position forwards play the animation, stop at the last frame defined by animation (keep the last property value) Ba Ckwards if Animation-delay is set, the screen stops at the first frame during the start-to-delay period. If delay is not set, the screen is the initial value set by the element */animation-play-state//Whether the animation is running or paused/* Value: paused specifies pause animation Running specifies the animation that is running, default */html<body> <div class= "Btndiv" > <button class= "openpopupbtn" id= "openbtn" > Popup window </button> </div> <div class= "popUp" > <p> I am the popup content </p> <button class= "Closepopupbtn" Id= "CLOSEBTN" > Close </button> </div></body>//css/*button style */. btndiv{text-align:center; }. openpopupbtn,.closepopupbtn{width:60px; height:40px; line-height:40px; border:1px solid #c9c9c9; Background-color: #FFF; box-shadow:1px 1px 1px 1px #eee; }. openpopupbtn{margin-top:50px; }. openpopupbtn:hover,.closepopupbtn:hover{Background-color: #eee; Cursor:pointer; }/* Frame style */. popup{width:600px; height:500px; Text-align:center; Background-color: #FFFeee; border:1px solid #ccc; box-shadow:1px 1px 1px 1px #eee; Position:absolute; left:50%; Margin-left:-300px; opacity:0; /* Transparency is 0 */}. closepopupbtn{Position:absolute; bottom:20px; left:50%; Transform:translate (-50%); }HTML structure is relatively simple, a button, a pop-up window. Style you can choose by yourself, this part is not the point.
here is the core of implementation!!!! ??
We look at the JS section first, just realize the click Function, do not do JS animation
window.onload = function(){ var popUp = document.getElementsByClassName(‘popUp‘); //获取div.popUp的DOM节点,注意！popUp此时是一个数组 var openBtn = document.getElementById(‘openBtn‘); //获取点击按钮的DOM节点 var closeBtn = document.getElementById(‘closeBtn‘); //获取弹框里面关闭按钮的DOM节点 //点击弹窗按钮触发事件 openBtn.onclick = function(){ //给div.popUp添加一个名叫showCont的id,随后该id执行对应动画 popUp[0].setAttribute(‘id‘,‘showCont‘); } //点击关闭按钮触发事件 closeBtn.onclick = function(){ //给div.popUp添加一个名叫hiddenCont的id,随后该id执行对应动画 popUp[0].setAttribute(‘id‘,‘hiddenCont‘); }}
And take a look at the key CSS3 animation section
/*定义CSS样式*/ /*定义打开弹窗动画*/ #showCont{ animation: showPopUp 1s; animation-fill-mode: forwards; /*保持动画后的状态*/ } /*定义关闭弹窗动画*/ #hiddenCont{ animation: hiddenPopUp 1s; animation-fill-mode: forwards; }/*定义动画规则*/ //打开弹窗动画@keyframes showPopUp{ 0%{ opacity: 0; top:-60%; transform: rotateZ(0deg); //初始透明度为0,位于顶部-60%位置,旋转Z轴为0 } 50%{ transform: rotateZ(-10deg); //动画进行一半的时候,规定旋转Z轴为-10度 //此时透明度和顶部位置都会自动计算 } 100%{ opacity: 1; top:20%; transform: rotateZ(0deg); //动画结束后的最终参数 }} //关闭弹窗动画 和打开动画相反即可@keyframes hiddenPopUp{ 0%{ opacity: 1; top:20%; transform: rotateZ(0deg); } 50%{ transform: rotateZ(-10deg); } 100%{ opacity: 0; top:-60%; transform: rotateZ(0deg); }}
At this point our first case: CSS3 animation implementation of the pop-up window is complete.
Let's look at the second case: Carousel diagram. This case is relatively simple.
Implementation ideas:
//html<div class="carousel"></div>//css.carousel{ width:100px; height:100px; overflow: hidden;}
//html<div class="carousel"> <div class="items"></div></div>//css.items{ color:#FFF; width:420px; //存放4个轮播图 position:absolute; //动画更改left达到轮播滚动的效果 left:0px; animation:carouselMove 3s infinite; //定义动画相关属性}
//通过不断改变items的位置,从而显示不同的轮播图,实现效果//当动画结束之后,又返回初始值,可以无数循环@keyframes carouselMove{ 0%{ left:0px; } 35%{ left:-100px; } 70%{ left:-200px; } 100%{ left:-300px; }}
Full code:
//html<div class= "Carousel" > <div class= "Items" > <div class= "item1" > Carousel 1</div> <div class= "item2" > Carousel 2</div> <div class= "Item3" > Carousel 3</div> <div class= "ite M1 "> Carousel 4</div> </div></div>//css.carousel{width:100px; height:100px; position:relative; left:400px; top:100px; Overflow:hidden;}. items{color: #FFF; width:420px; Position:absolute; left:0px; Animation:carouselmove 3s infinite; Animation-direction:normal; /*animation-timing-function:easy rules the speed of animation animation-iteration-count:infinite play countless times */-webkit-animation: Carouselmove 3s infinite; -moz-animation-direction:normal;}. item1,.item2,.item3{width:100px; height:100px; Float:left;}. item1{background-color: #12B7F5;}. item2{background-color: #F9B041;}. item3{background-color: #CCCCCC;}
//定义动画@keyframes carouselMove{ 0%{ left:0px; } 35%{ left:-100px; } 70%{ left:-200px; } 100%{ left:-300px; }}
The above is part of the knowledge of CSS3 animation! Thank you!
Need source code can be downloaded here:
https://github.com/soybeanxiaobi/css3-
CSS3 Animation (combined example)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
