css3动画解析.ppt

杨超 1 transition（过渡） 2 transform（变换） 3 animation（动画） 4 css3动画生成工具 5 css3动画库 transition（过渡） 1. transition-property 过渡的效果 CSS 属性的名称（width，height etc.） 2. transition-duration 完成过渡效果需要时间 3. transition-timing-function 过渡的速度曲线 4. transition-delay 过渡延迟 div{ -webkit-transition-property:width,height; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /*简写*/ -webkit-transition:width 1s linear 2s; } div:hover{ width:200px; height:200px; } transition-property: none|all|property; -webkit-transition:all 1s ease-in-out; btn{ background:red; -webkit-transition:all 1s ease-in-out; } btn:hover{background:black;} transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); linear 匀速运动 ease 慢速开始，然后变快，然后慢速结束 ease-in 慢速开始，然后变快 ease-out 先快后慢 ease-in-out 慢-快-慢 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 transform: none|transform-functions; 旋转(rotate)，缩放(scale)，位移(translate)， etc. /*垂直居中*/ div{ position:absolute; top:50%;left:50%; -webkit-transform:translate(-50%,-50%) } /*硬件加速*/ -webkit-transform: translateZ(0); animation @keyframes 动画 @-webkit-keyframes a { 0%{} 100%{} from {} to {} } animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 ease。 animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 n|infinite; animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal。 normal|alternate; animation-play-state 规定动画是否正在运行或暂停。默认是 running。 paused|running; animation-fill-mode 规定对象动画时间之外的状态。 none | forwards | backwards | both; div{ background:red;width:100px;height:100px; -webkit-animation-name : changecolor ; -webkit-animation-duration:5s ; -webkit-animation-timing-function:ease; -webkit-animation-delay :3s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction:alternate; -webkit-animation:changecolor 5s ease infinite alternate; } @keyframes changecolor