如何理解css3 -webkit-animation-fill-mode属性值为both时的使用方法

大家都知道 -webkit-animation-fill-mode 属性是检索或设置对象动画时间之外的状态,但是一直以来我对它的属性值都存在一个疑问,both和forwards的使用到底有什么区别呢?经过不停的测试、搜索,个人认为差别在于:

both是设置对象状态为动画结束或开始的状态,主要是取决于-webkit-animation-direction这个属性,为什么这么说呢?请看以下:

<div class="center"></div>
 1 .center{
 2     border: 1px solid #332;
 3     width: 60px;
 4     height: 60px;
 5     border-radius: 60px;
 6     background: rgba(0,0,0,0.5);
 7     -webkit-animation:ani 1s ease-in 2 alternate both;
 8 }
 9 @-webkit-keyframes ani{
10     0%{-webkit-transform:translateX(0);}
11     50%{-webkit-transform:translateX(40px);}
12     100%{-webkit-transform:translateX(100px);}
13 }

注释:当设置方向为反方向的时候,根据动画执行的次数判断小球是否处于backwards还是forwards的状态,以上代码是执行偶数次,动画来回运动,最终回到初始状态极为backwards状态,当为奇数次时,则为结束状态forwards状态

时间: 2024-10-07 08:17:11

如何理解css3 -webkit-animation-fill-mode属性值为both时的使用方法的相关文章

java 反射: 当Timestamp类型的属性值为null时,设置默认值

import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.sql.Timestamp; class Person { private String name; private int age; private Timestamp birth; public Timestamp getBirth() { return birth

CSS3中transform几个属性值的注意点

transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文章 CSS3 Transform. 与transition配合使用的方法参考CSS动画 animation与transition 本文记录几个注意点: 1.transform:rotate(30deg),2D旋转,正值为顺时针旋转,负值为逆时针旋转,默认旋转基点是中心点,也可以通过transform

CSS3中和动画有关的属性transform、transition 和 animation

CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数.需要先有transform-origin定义旋转的基点可为left top center righ

理解CSS3中的background-size(对响应性图片等比例缩放)

2016-03-10 01:40 by 空智, 7463 阅读, 8 评论, 收藏, 编辑 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用background-size:400px 200px缩放设置 固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%

CSS3让文本自动换行——word-break属性

1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-break:break-all; } word-break属性可以使用的值 值 换行规则 IE5以上 Safari与Chrome normal 使用浏览器默认的换行规则 支持 支持 keep-all 只能在半角空格或连字符处换行 支持 不支持 break-all 允许在单词内换行 支持 支持 当wor

DOM元素属性值如果设置为对象

结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指向的是基本数据类型,那么系统会自动将这个基本数据类型的值包装为对应的对象类型: 就比如: 数组里面存的是string类型的值,然后jq实例调用each方法,打印的this如下图所示: this指向的基本数据类型的值被转换为了String类型: 但是这里说的不是这个问题,而是和这个问题类似,我们在给D

CSS3与动画有关的属性transition、animation、transform对比

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换). Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D

深入理解CSS3 Animation 帧动画

CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动画steps属性的理解 我们知道CSS3的Animation有八个属性 animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-play-sta

深入理解CSS3 Animation 帧动画 ( steps )

作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html -------------------------------------------------------------------------------------------------------------------------------- CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是