CSS3动画讲解教程.pptx

CSS3动画讲解;01;css3简介;css3 2D转换常见知识点;rotate()方法，设置元素旋转的角度。 使用方法： 代码案例 div{transform:rotate(30deg);} 详解 rotate中只有一个参数，是设定角度值，deg是单位。此时div将会顺时针旋转30度，如果角度是负值(-30deg)，div将会逆时针旋转30度 效果图 浅红色是没有给rotate属性之前的样式； 图一是给了transform:rotate(30deg)后的样式； 图二是给了transform:rotate(-30deg)后的样式； ;@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 使用方法： 方法1 @keyframes myfirst{ from {background: red;} to {background: yellow;} } 讲解： 第一种方法和第二种方法一样，都是让元素的背景颜色从红色变成黄色。第二种方法可以自己设定任意百分比，以及对应的样式。元素引入这个myfirst后就会出现过渡效果。 引入方法 div{width:100px;height:100px;background:red;position:relative;animation:myfirst 1s linear infinite;} animation将动画与 div 元素绑定。后面的myfirst 1s linear 2s infinite alternate是缩写；见下一页 ;animation-name 规定需要绑定到选择器的 keyframe 名称。(myfirst ) animation-duration 规定完成动画所花费的时间，以秒或毫秒计。(1s) animation-timing-function 规定动画的速度曲线。(linear) linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 animation-delay 规定在动画开始之前的延迟。(2s) animation-iteration-count 规定动画应该播放的次数。(infinite) n 定义动画播放次数的数值。 infinite animation-direction 规定是否应该轮流反向播放动画。(alternate) normal 默认值。动画应该正常播放。 alternate 动画应该轮流反向播放。 ;?????