transition过渡 和animation 动画
要知道 transition过渡和animation动画都是实现元素运动的一种方式。区别在于: transition过渡需要人为触发,例如点击触发或者鼠标悬停触发,而animation是可以不需要人为触发。transition功能支持从一个属性值平滑到另外一个属性值,animations功能支持通过关键帧的指定来在页面产生更复杂的动画效果。
transition过渡
transition 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
如果时长未规定,则不会有过渡效果,因为默认值是 0
过滤的属性
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
实例
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
animation 动画
当您在 @keyframes 中创建动画时,需要把它捆绑到某个选择器,否则不会产生动画效果。
动画属性
- 规定动画的名称
- 规定动画的时长
您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
animation动画属性
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
实例
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;/* Firefox */
-webkit-animation: myfirst 5s;/* Safari 和 Chrome */
-o-animation: myfirst 5s;/* Opera */
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
实践源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tree-table</title> <style> /*transition的动画*/ .t1{ width:100px; height:100px; transition:background-color 2s,width 2s,height 2s; background-color:yellow; } .t1:hover{ width:200px; height:200px; transition:background-color 2s,width 2s,height 2s; background-color:red; } /*animation的动画*/ .a1{ width:100px; height:100px; background-color:yellow; margin-top:20px; animation:m 5s infinite; position:relative; } @keyframes m{ 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } </style> </head> <body> <!-- transition的动画 --> <h2>transition的动画 鼠标触发</h2> <div class="t1"></div> <!-- animation的动画 --> <h2>animation的动画</h2> <div class="a1"></div> </body> <script> </script> </html>