CSS旋转动画和动画的拼接

• 2019 年 10 月 8 日
• 筆記

旋转动画

第一个样式：

@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配置好，就可以完美实现动画拼接了；