使用 CSS3 Animations 实现桃心跳动画效果 - 文章教程

使用 CSS3 Animations 实现桃心跳动画效果

发布于 2019-10-20 字数 1903 浏览 1296 评论 0

CSS3 Animations 赋予了我们更多的创意动画技术,通过 CSS3 Animations 这个属性,我们可以实现一些很炫很酷的动画效果,这篇文章就给大家介绍使用 CSS3 Animations 实现一个关键帧实桃心跳动画效果。

Animations 常用属性

首先对于不熟悉CSS3 Animations的开发者,我们一起来看看 CSS3 Animations 的常用属性,熟悉的开发者就当时温习一下吧,也不是什么坏事。

  • animation-name 动画名称
  • animation-duration 动画持续时间
  • animation-iteration-count 动画循环次数,默认 1 次,infinite 无限次。
  • -webkit-animation-direction 动画播放的方向,两个值,默认为 normal,这个时候动画的每次循环都向前播放。另一个值是 alternate,则第偶数次向前播放,第奇数次向反方向播放。

注意:CSS3 Animations 动画不能兼容所有的浏览器,有些属性需要添加浏览器前缀才能生效。

心跳动画效果

这里给大家分享实现桃心跳动动画效果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;
}

猛戳这里查看示例效果

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0