css3 animation-fill-mode属性笔记

原创 PHP笔记  2017-09-17 18:34  阅读 961 views 次

在css中,animation-fill-mode属性是用来规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。默认情况下,css动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode属性可重写该行为。

animation-fill-mode属性值

  • none :动画在动画执行之前和之后不会应用任何样式到目标元素(默认值)。
  • forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
  • backwards:设置动画结束之后回到初始状态。
  • both :向前和向后填充模式都被应用。
  • initial:设置该属性为它的默认值。
  • inherit:从父元素继承该属性。

语法格式:

animation-fill-mode: none / forwards / backwards / both / initial / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation-fill-mode属性笔记</title>
<style>
#afm
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:backwards;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
<head/>
<body>
<div id="afm"></div>
</body>
</html>

运行结果:

注意:animation-fill-mode属性不兼容Internet Explorer 9以及更早版本的浏览器

动画简写属性——>css3 animation动画属性笔记

本文地址:https://www.ggbiji.com/css-animation-fill-mode.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情