在web前端中只用css实现动画效果

animation动画
1.@keyframes 定义关键帧动画
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
注：0% 是动画的开始时间，100% 动画的结束时间。

 div{
 .....
    # 动画名称 时间 匀速  循环播放
 animation: m 0.8s linear infinite;
 }
@keyframes m{
  50%{transform: rotate(45deg) scale(0.8,0.8);}   
#表示当时间到达50%时候进行的元素效果
  80%{transform: rotate(45deg) scale(0.7,0.7);}   
#表示当时间到达100%时候进行的元素效果
 }

 

另一种方法：

  @keyframes m {
            from {transform: rotate(45deg) scale(0.8,0.8);}
            to {transform: rotate(45deg) scale(0.7,0.7);}
        }
 

模板如下：

 
1.
@keyframes 动画名称{
   10% {...}
   20% {...}
 …
      100%{...}
 }
2.
@keyframes m {
            from {}
            to {}
        }

动画效果属性设置：（设置在选择器里面）

案例：

div（选择器）{
 width:100px;
 height:100px;  #宽高
 background:red;   #背景颜色
 position:relative;   #定位
 animation:m 5s linear infinite;   #多个动画属性一起设置   
 animation-delay:2s; #设置延迟时间
}

注！：
1，animation-timing-function 动画曲线
取值：
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
2，animation-iteration-count 动画播放次数 n或infinite（循环播放）
3，animation：name duration timing-function delay iteration-count direction；可同时设置多个属性
4，animation-direction
取值：
normal 默认动画结束后不返回
Alternate 动画结束后返回
5，animation-play-state 动画状态
取值：
paused 停止
running 运动
6，animation-fill-mode 动画前后的状态，规定动画在播放之前或之后，其动画效果是否可见。
取值：
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应该开始属性值
both 向前和向后填充模式都被应用
7，scale()属性来将元素根据中心原点进行缩放。
缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

transform,下次再讲！