首页 > 代码库 > CSS3 animation属性
CSS3 animation属性
CSS3 animation属性
@import
@media
@font-face
@keyframes
当我们使用@keyframes定义好了一个动画,它并不会执行产生任何效果,直到我们通过animation属性将动画应用到相应元素上。
对于 CSS3 animation 属性其完整的语法如下:
animation: name duration timing-function delay iteration-count direction;
- name是使用@keyframes定义好的关键帧名称
- duration从字面意思可知是指定动画持续时间
- timing-function 指定动画以何种方式播放,具体指的是从元素的一个状态过渡到另一个状态所使用的方式,可用的值有linear,ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。每种方式的讨论超出了原计划,这里只是列出
- delay指定一个延时让动画不立即播放
- iteration-count 指定动画重复次数,可以指定一个数字,也可以使用‘infinite‘表示一直播放
- direction指定动画是否反向播放或者交替着播放,可用的值有normal, reverse, alternate, alternate-reverse
其中name和duration 是必需的,如果不指定duration默认为0,也就是动画持续0秒,所以就无法看到动画效果。
在前面已经定义好了关键帧了,现在我们使用animation将其应用到相应元素上。
现在打开页面就会看到最上面那个动画效果了。
使用百分比指定关键帧的版本
上面介绍过通过百分比的形象我们可以指定动画过程中任何时间点时元素的状态,将上面的版本变为百分比版本是非常容易的事情。
我们只需把关键帧的定义由from to 改为想要的时间百分比即可。
比如开始的状态不改变,增加一个动画进行到50%时颜色为黄色大小为75X75,最后为绿色大小为100X100。
CSS3 animation属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。