Css3 Animation

CSS3简单动画

现代网页中常见的动画有两种：一种是使用canvas来实现的动画，它的原理与现实世界中动画片的原理是一样的，整个过程是通过脚本一帧一帧绘制出来，按照一定的频率播放来达到动画效果的；另一种是简单动画，是对现实世界动画的一种抽象和简化，只需要特别指定动画对象开始和结束的状态，设置动画过程的某些参数，就可以实现动画。

在CSS中，transition和animation是实现简单动画的两种方式，通过这两种方式实现动画的原理可以分解为以下三个步骤

• 设定目标元素的动画初始状态 - 这是通过为元素赋予不同的CSS属性来实现的
• 设置在两种状态之间过渡状态参数（动画的时间、延迟、开始、暂停、继续、循环次数等等） - 通过设定transition(animation)属性来实现
• 开始动画 - 设定目标元素的结束状态

在网页中每一类元素都会包含不同的状态，这些状态由CSS样式来指定。如对于文字而言，文字有大有小、有丰富的颜色、阴影甚至还有镂空等复杂的表现；对于一张图片，有长、宽、圆角、透明度、远近透视、翻转、折叠等等，这些都是元素的状态。元素从起始状态经过变化过渡到结束状态就形成了动画。例如我们要完成一张图片从无到有慢慢出现的效果，这是通过控制其透明度来实现的。下面我们先看一下使用transition如何实现：

Transition

1. 定义图片的初始状态

.start {
  opacity: 0;
}

1. 定义图片的结束状态

.end {
  opacity: 1;
}

1. 使用transition来定义图片从无到有的过渡过程

.animate {
  transition-property: opacity;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

这个过渡状态的意思就是，动画延迟1s开始，改变元素的透明度，过渡效果为线性过渡，整个过程持续3s

transition属性意义

属性 |描述 | ———————————————— transition-property |针对哪个属性进行动画 | ———————————————— transition-duration |动画持续时间 | ———————————————— transition-timing-function |动画的速度曲线函数 | ———————————————— transition-delay |延迟动画开始时间 | ————————————————