CSS中那些微妙模糊的属性_html/css_WEB-ITnose
Jun 24, 2016 am 11:35 AM
在前端开发中,我经常碰到一些不能马上理解的css属性, 于是打算以后但凡碰到这些微妙又模糊的属性,都归纳到这里。
animation-fillmode属性值中的“both”
css3 动画中animation-fillmode中的“both”属性,无论谁在mdn或者w3school的文档中对该属性的解释都是:
动画将会执行 forwards 和 backwards 执行的动作
而MDN的原版文档中对该属性的解释为:
The animation will follow the rules for both forwards and backwards,
thus extending the animation properties in both directions.
这样的解释让人摸不着头脑, 实践出真知,我们还得试一下才能知道。
用demo说话:
播放次数为1,fillmode为both时的动画停留状态
播放次数为1 没有设置fillmode时的动画停留状态
附上css的代码:
#box{ width:100px; height:100px; background:black;/* 在此设置有没有both以及播放次数的对比 */ -webkit-animation: move 1s ease 1 alternate both; animation:move 1s ease 1 alternate both ; }@-webkit-keyframes move{ 100%{ -webkit-transform:translate3d(150px,0,0); transform:translate3d(150px,0,0); -ms-transform: translate3d(150px,0,0);}}
从demo中可以知道, both的属性是与动画方向(animation-direction)以及动画播放次数(animation-iteration-count)联系起来的,当方向设置为alternate时,次数为奇数次时,动画的停留状态为结束时状态(forwards),反之偶数次时为初始状态(backwards)

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input?

What is the purpose of the <iframe> tag? What are the security considerations when using it?

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <meter> element?

What is the purpose of the <datalist> element?

What is the purpose of the <progress> element?

What are the best practices for cross-browser compatibility in HTML5?
