CSS旋转动画和动画的拼接
旋转动画
第一个样式：
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}第二个样式：
.icon {
color: #f5222d;
animation: rotating 1.8s linear infinite;
animation-fill-mode: forwards;
display: inline-block;
i {
font-size: 60px;
}
}HTML代码
<div class="icon">
<i class="iconfont iconloading"></i>
</div>linear是匀速运动，还可以设置为： ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 测试 ease-out 动画以低速结束。 测试 ease-in-out 动画以低速开始和结束。 测试 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 infinite是无限次播放的意思，这里也可以写个数字，来控制播放几次；
动画的拼接
keyframes样式
@keyframes dropDown {
0% {
transform: translate(0px, -120px);
opacity: 0;
}
100% {
transform: translate(0px, 0px);
opacity: 1;
}
}
@keyframes popUp {
0% {
transform: translate(0px, 0px);
opacity: 1;
}
100% {
transform: translate(0px, -120px);
opacity: 0;
}
}元素样式
.appTip {
animation-name: dropDown, popUp;
animation-duration: 800ms, 800ms;
animation-delay: 0ms, 3200ms;
animation-timing-function: ease, ease;
animation-iteration-count: 1, 1;
animation-fill-mode: forwards, forwards;
}animation-name可以设置两个（或多个）keyframes名； 后面的样式属性都是按照两个（或多个）keyframes来配置的； 只要把animation-delay配置好，就可以完美实现动画拼接了；
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-09-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录