过渡和动画怎么在CSS3中使用

今天就跟大家聊聊有关过渡和动画怎么在CSS3中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强>过渡

过渡属性是
转换属性,
transition-duration,
transition-timing-function,
transition-delay
的简称,用于设定一个元素的两个状态,不同的状态可以用伪类,比如:,:活跃或者是通过javascript动态设定.IE10 +支持。

所以过渡的初始值为:

transition-delay: 0;
transition-duration: 0;
转换属性:;
transition-timing-function:缓解;

<强>用法

div {
转型:& lt; property>& lt; duration>& lt; timing-function>& lt; delay>;
}

并且有事件可以监测过渡结束

el.addEventListener (“transitionend" updateTransition,真的);
在webkit
//
el.addEventListener (“webkitTransitionEnd" updateTransition,真的);

<>强实例

HTML

代码如下:

& lt; !——演示1:褪色块——比;
& lt; div id=癴ade"比;
移动!
& lt;/div>
& lt; div id=皀udge"比;老鼠
animation 属性是如下这些属性的简写, 　　animation-name: none  　　动画:0 s  　　animation-timing-function: ease  　　animation-delay: 0 s  　　animation-iteration-count: 1, 　　动画方向:normal  　　animation-fill-mode:没有 　　用法 　　, 　　动画: 　　animation-name  　　时间(时间), 　　timing-function  　　时间(延迟), 　　animation-iteration-count(,结束之前的循环次数), 　　single-animation-direction /* {, 　　动画方向:normal (每次从正方向开始), 　　动画方向:reverse (每次从反方向开始), 　　动画方向:alternate (正反往复), 　　}*/, 　　single-animation-fill-mode

<强>实例