animations与transition

时间 2019-11-07

标签 animations transition 繁體版

原文原文链接

transition过渡和animation 动画

要知道 transition过渡和animation动画都是实现元素运动的一种方式。区别在于： transition过渡须要人为触发，例如点击触发或者鼠标悬停触发，而animation是能够不须要人为触发。transition功能支持从一个属性值平滑到另一个属性值，animations功能支持经过关键帧的指定来在页面产生更复杂的动画效果。html

transition过渡web

transition 过渡是元素从一种样式逐渐改变为另外一种的效果。动画

要实现这一点，必须规定两项内容：spa

规定您但愿把效果添加到哪一个 CSS 属性上
规定效果的时长

若是时长未规定，则不会有过渡效果，由于默认值是 0code

过滤的属性orm

　　transition 　　　　　　　　简写属性，用于在一个属性中设置四个过渡属性。htm

　　transition-property 　　　　规定应用过渡的 CSS 属性的名称。对象

　　transition-duration　　　　定义过渡效果花费的时间。默认是 0。blog

　　transition-timing-function 　　规定过渡效果的时间曲线。默认是 "ease"。ip

　　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>

1. Animations
2. CSS Animations vs Web Animations API
3. Web Animations
4. css3 - transform, transition 与 translate
5. 小tip: transition与visibility
6. CSS的Transition与Animation
7. Toggle Slow Animations
8. Full Screen Animations
9. cocos2d-x::Animations
10. Animations的使用
更多相关文章...
• XSL-FO 与 XSLT - XSL-FO 教程
• PHP - AJAX 与 PHP - PHP教程
• Composer 安装与使用
• Java Agent入门实战（一）-Instrumentation介绍与使用

animations与transition

transition过渡 和animation 动画

实例

实践源码

transition过渡和animation 动画