A, CSS3 transitions
(A), CSS3 transition Profile
CSS3 transitions is an element gradually change from one style to another effect.
Two elements of implementing a transition effect:
- Provisions to add effects to which CSS properties
- Duration of effect the provisions of
Custom animation rules
Transition Transition (effect) an attribute element from the "a value of" transition to "another value" within a specified period of time
(B), transition properties
Syntax: {transition: the duration of the transition method attribute name}
- transition-property property name (if it is a property with the name of the attribute; if it is more properties between the property name separated by commas; if all the property, which you can use all) to indicate which property changes.
- transition-duration duration of the change in length (in seconds or milliseconds)
- transition-timing-function mode transition realized (for example, after the first slow-fast / slow down after), the concrete realization of the function is implemented.
- transition-delay transition time before the start waiting seconds or milliseconds.
transition-timing-function property values
- linear uniform (linear transition)
- ease soon after the first slow and then slowly
- ease-in after the first slow-fast
- ease-out slow down after
- ease-in-out at the beginning of the slow end of the slow middle fast
Examples :
Duplex original state is red, the mouse over the use of transition property variations within a set of 3s, red to blue by the background gradient, text color gradually becomes white.
1, first define the original state of the div tag,
2, then set the state when the mouse hovers above.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>过渡</title> 6 <style> 7 div{ 8 height: 100px; 9 width:300px; 10 line-height:30px; 11 border-radius:5px; 12 align-content:center; 13 color:red; 14 background-color: #999; 15 transition:all 1s linear; 16 } 17 div:hover{ 18 color:white; 19 /*background-color: #007;*/ 20 background:linear-gradient(to bottom,#f0f,#00f) 21 } 22 </style> 23 </head> 24 <body> 25 <div align="center" style="font-size:30px">transition</div> 26 </body> 27 </html>
Performance results: (because the transition is a dynamic effect, so the following is only to show the initial state, the intermediate, after the transition effect)
initial
intermediate
At last
Two, CSS3 animation
(A), CSS3 animation to realize what effect
Animation element is the gradual change from one style to another style effect. You can change as many styles as many times. Animation is done by animation property.
A percentage change of the predetermined time, or with keyword "from" and "to", equivalent to 0% and 100%. 0% is the beginning of the animation, the animation is done 100%. For optimal browser support, you should always define the 0% and 100% of the selector.
Animates two elements:
- 1、首先要定义一个动画 ，定义一个@keyframes 规则（关键帧）
- 2、调用动画 动画定义好之后，使用animation 属性调用动画
了解动画的形成原理：
是根据人的“视觉暂留”现象，将一组静止的图形连续出现后，便形成了动画。Flash动画就是基于此原理来制成动画的，时间轴上的每一帧在编辑区中有不同的图形，当时间轴上的帧以当前帧频向前移动时，我们看到的是编辑区中的一组图形不断变化，从而产生了运动的视觉效果
（二）、animation属性设置动画效果
animation属性取值
- @keyframes 规定动画
- animation 所有动画属性的简写属性，除了animation-play-state属性
- animation-name 规定@keyframes 动画名称
- animation-duration 规定一个动画完成的周期所花费的秒或毫秒。默认值为0，
- animation-timing-function 规定动画的速度曲线。默认值为ease
- animation-delay 动画开始前等待的时间。取值可为负（-2s 动画跳过 2 秒进入动画周期），属性不兼容 IE 9以及更早版本的浏览器.
- animation-iteration-count 规定动画播放的次数。默认值为1
- animation-driection 规定动画是否在下一周期逆向地播放。默认值是normal
- animation-play-state 规定动画是否正在运行或暂停。默认值是running
- animation-fill-mode 规定对象动画时间之外的状态
animation-timing-function 属性取值
- linear 匀速（线型过渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 开头慢结尾慢，中间快
实例：
用动画animation属性实现在位置变化的同时颜色也发生相应的变化。
颜色：由红色—黄色—蓝色—绿色—红色；
位置：距左0px距顶0px—距左200px距顶0px—距左200px距顶200px—距左0px距顶200px—距左0px距顶0px（回到原地）
animation属性：@keyframes(关键帧) 动画名称为mycolor；一个动画周期为5s；动画运动先慢后快再慢ease；动画开始前等待2s；无限(infinite)循环播放；动画正在运行(runing)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画</title> 6 <style> 7 div{ 8 width:400px; 9 height:400px; 10 background:red; 11 position:relative; 12 animation-name:mycolor; 13 /*animation-name规定@keyframes 动画名称*/ 14 animation-duration:5s; 15 /*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/ 16 animation-timing-function:ease; 17 /*animation-timing-function规定动画的速度曲线*/ 18 animation-delay:2s; 19 /*animation-delay规定动画何时开始。默认值为0*/ 20 animation-iteration-count:infinite; 21 /*animation-iteration-count规定动画播放的次数*/ 22 animation-direction:alternate; 23 /*animation-driection规定动画是否在下一周期逆向地播放*/ 24 animation-play-state:running; 25 /*animation-play-state规定动画是否正在运行或暂停*/ 26 } 27 @keyframes mycolor 28 { 29 0% {background:red;left:0px; top:0px; } 30 25% {background:yellow; left:200px; top:0px;} 31 50% {background:blue;left:200px; top:200px} 32 75% {background:green;left:0px; top:200px;} 33 100% {background:red;left:0px; top:0px;} 34 } 35 </style> 36 </head> 37 <body> 38 <div></div> 39 </body> 40 </html>
除了可以这样每个属性单独设置，也可以使用animation 的简写属性：
1 div{ 2 width:400px; 3 height:400px; 4 background:red; 5 position:relative; 6 animation:mycolor 5s linear 2s infinite alternate; 7 }