最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3 Animations实现桃心跳动画效果例子
时间:2016-02-23 编辑:简简单单 来源:一聚教程网
CSS3 Animations怎么实现桃心跳动画效果?本篇文章小编给大家分享一下CSS3 Animations实现桃心跳动画效果例子,对此感兴趣的小伙伴们可以来看看。
css Animations 影响计算属性值,在animation执行过程中,属性的计算值被animation控制,它将覆盖原来定义的值。
如果对同一属性指定多个animation,最后定义的animation将覆盖前面的animation值。
在这些时候animation将不会影响属性计算值:在应用animation前、animation延时过期、animation结束。
Animations常用属性:
1、animation-name 动画名称
2、animation-duration 动画持续时间
3、animation-iteration-count 动画循环次数,默认1次,infinite无限次。
4、-webkit-animation-direction 动画播放的方向,两个值,默认为normal,这个时候动画的每次循环都向前播放。另一个值是alternate,则第偶数次向前播放,第奇数次向反方向播放。
心跳动画效果
这里给大家分享实现桃心跳动动画效果2个方法。
写法一
@keyframes pound {
from { transform: none; }
50% { transform: scale(1.4); }
to { transform: none; }
}
.heart {
/* ... */
animation: pound .5s infinite;
}
这个方法可以精简的地方:from和属于同一个属性可以合并写法。
@keyframes pound {
from, to { transform: none; }
50% { transform: scale(1.4); }
}
写法一进一步简写:from和to也就是0%-100% 如果这两个值都没有定义,写法可以直接省略。
@keyframes pound {
50% { transform: scale(1.4); }
}
写法二
使用到alternate,第偶数次向前播放,第奇数次向反方向播放。
@keyframes pound {
to { transform: scale(1.4); }
}
.heart {
/* ... */
animation: pound .25s infinite alternate;
}
-
下一个: 纯 CSS 选项卡的实现例子
相关文章
- 用CSS3来实现逐渐发光的方格边框 05-17
- CSS3背景下的@font face有什么规则 05-06
- 详解CSS3中nth-child与nth-of-type的区别 01-10
- CSS3,线性渐变(linear-gradient)的使用总结 01-10
- CSS3动画特效制作教程 好看的CSS3动画特效 01-04
- CSS3 Flexbox属性用法大全 CSS3 Flexbox各种属性详解 01-04