H5 CSS3

JS实现动画与CSS3实现动画的区别：

JS:帧动画，使用定时器，每隔一段时间更改当前的元素

CSS3:补间动画，过渡动画，多个节点控制，性能更好，移动端表现更好 

 

CSS3动画分为：

1.animation（多个动画）：

 

2.transition（单一动画）：

transition-property：设置过渡效果的CSS属性名称

transition-duration：设置完成过渡效果需要的秒数

transition-timing-function:：规定速度效果的速度曲线

transition-delay:定义过渡效果何时开始

 

@keyframes规则：

通过@keyframes规则，可以自定义创建动画，将一套CSS样式转换为另一套CSS样式：

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

再将其调用：

animation: mymove 1s linear infinite /*动画运行无限次*/ alternate /*逆播放*/

 

transform属性：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。