CSS小计之动画

transform动画有两点：

• 动画效果：transform（设置动画表现形式）

translate(x,y)：x/y轴移动

scale(x,y)：缩放

rotate(angle)：旋转

• 动画效果控制：transition （设置动画过程，属性名称transition-property、动画时长transition-duration延迟时长transition-delay等）

请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。

注释：本例在 Internet Explorer 中无效。

animation 动画

div
{
animation:mymove 5s infinite;
}

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

@keyframes animationname {keyframes-selector {css-styles;}}

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 注意： 您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

 
 




注意: @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.

text-transform：控制文本的大小写。

This Is An H1 Element
This is some text in a paragraph.
This is some text in a paragraph.
This is some text in a paragraph.