css 动画

前言

一般web开发都不怎么重视css，我之前也很少写动效，但是写了之后发现给人的体验完全是不同的，运用动画能大大提高用户体验。

正文

动画中有几个词容易搞混，transform，translate， transition，下面一个个介绍

一、transform

　　transform有几个属性，rotate(旋转)， scale(缩放)， skew(扭曲)，translate(移动)，matrix(矩阵变形)

　　其中我个人用的比较多的就是translate，具体用法: transform:translate(x, y), 即以左上角为原点移动到坐标为（x, y）的位置

二、transition

　　这个则是用来做动画过渡的，就比如上一个例子的移动，光写translate(x, y) 的话，打开页面，这个css属性作用的dom元素就直接出现在(x,y)的位置，

　　这时可以加上transition

div{
  width:200px;
  height:50px;
  transition: all 1s;
}
div:hover{
  transform: translate(100px, 0);
}

上述代码表示一个宽200像素，高50像素的div在鼠标移上去时在1s之内移动到（100px，0）处

 

transition有4个属性：

1.transition-property，指的是哪个属性执行动画，主要有三个值 none（没有属性改变），all（默认值，表示所有属性），indent（元素属性名，这里可以填各种属性，像是高度，宽度，颜色，透明度，但是不能填display）

2.transition-duration，持续时间

3.transition-timing-function，有5个值 linear（匀速），ease（逐渐慢下来），ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）

4.transition-delay，延迟，指的是在一段时间后执行动画。

例子：

img{
  transition: height 1s 5s ease;
}

如果两个时间同时出现，则表示第一个是持续时间，第二个是delay

 

transition的局限（这个是抄阮一峰老师的）

（1）transition需要事件触发，没法在网页加载的时候就进行动画

（2）transition是一次性的，没法重复发生，除非你多次去触发，（比如用js循环模拟click）

（3）transition只有开始状态和结束状态

为了解决上面的局限，下面进入css animation

 

Animation

先定义一个动画

// 先定义一个名为variety的动画，效果是让高度变化，先短后长
@ keyframes variety{
  0% {height: 100px;}
  50% {height:50px;}
  100% {height: 200px;}
}

// 在div上使用这个动画
div{
  height:10px;
  width: 10px;
  animation: 2s variety;
}

这是个一次性的动画，结束后div的高度会恢复为10px


 

几个实用的关键词：

（1）infinite ，表示循环播放动画

（2）forwards表示动画结束后保持结束状态，不变回起始状态

（3）可以在variety后面加上数字，表示动画播放几次

（4）alternate  比如定义一个div向右移的动画，div { animation: 1s rightmove alternate 5 forwards } 这个就表示div会 “右 -> 左 -> 右 -> 左 -> 右” 这么来回运动，最后停在右边

详细例子：div { animation: 1s 3s rightmove linear alternate 5 forwards }  运动方式如上，加入了3s的延迟和匀速运动

 

最后加一个animation-play-state的例子　　

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 2s alternate 3;
    animation-play-state: paused;
}
div:hover{
    animation-play-state: running;
}
@keyframes mymove{
    from {width:20px;}
    to {width:200px;}
}

表示div从宽20px到200px往复变化三次，但是要hover才触发动画，其他时间都是动画暂停

以上