css3实现图片360度旋转及animation、@keyframes的详解

每天记录一点点知识，日积月累下来，你会发现，你已经会的比别人多！！！！！

下边的两块css代码，可以实现图片360度旋转

@keyframes rotateImage {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

.content-play-cover img {
  animation: rotateImage 10s linear infinite;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  border: 1px solid #333;
}

一、复合属性：animation: rotateImage 10s linear infinite;

- animation-name：规定需要绑定到选择器的keyframe名称，例子中：rotateImage

- animation-duration：规定完成动画所花费的时间，以秒或毫秒计，例子中：10s

- animation-timing-function：规定动画的速度曲线。有以下值：

    -- linear：动画从头到尾的速度是相同的

    -- ease：默认。动画以低速开始，然后加快，在结束前变慢

    -- ease-in：动画以低速开始

    -- ease-out：动画以低速结束

    -- ease-in-out：动画以低速开始和结束

- animation-delay：规定动画开始之前的延迟，可选，

- animation-iteration-count：规定动画应该播放的次数。

    -- n：定义动画播放次数的数值

    -- infinite：规定动画应该无限次播放，例子中设置

- animation-direction：规定是否应该轮流反向播放动画

二、@keyframes关键桢的定义与用法

创建：通过@keyframes规则，能够创建动画。

原理：将一套css样式逐渐变化为另一套样式。

语法：@keyframes animationname {keyframes-selector{css-styles;}}

- animationname： 必需。定义动画的名称。

- keyframes-selector ：必需。动画时长的百分比。以下为合法的值：

    --  0-100%

    --  from：与0%相同

    --  to：与100%相同

- css-styles：必需。一个或多个合法的CSS样式属性