样式: CSS: Animations about blog

[xvno]

说明

• 定义keyframes
• 描述animation

animation属性:

主要

property	Description
animation	A shorthand property for setting all the animation properties
animation-name	Specifies the name of the @Keyframes animation
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-timing-function	Specifies the speed curve of the animation
animation-delay	Specifies a delay for the start of an animation
animation-iteration-count	Specifies the number of times an animation should be played
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles

很重要 MDN: animation-fill-mode

这个用来填补动画前和结束后的样式, 这儿有个实例, 动态添加popup, 并在5秒钟后删除, 但是动画样式延迟了0.5秒持续了3秒, 所以最后的1.5秒状态在默认情况下按动画前的状态来渲染, 如果用这个属性并设置成afterwards, 便可把动画后的样式填补为结束时的样式.

property	Description
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts-- backwards , after it ends-- forwards , both or none)

不常用

property	Description
animation-play-state	Specifies whether the animation is running or paused

定义keyframes

@keyframes spinning {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

<div class="container">
    <div class="spinner red">
        <div class="drip">
        </div>
    </div>
<!--     <div class="spinner yellow">
        <div class="drip">
        </div>
    </div>
    <div class="spinner blue">
        <div class="drip">
        </div>
    </div>
    <div class="spinner orange">
        <div class="drip">
        </div>
    </div> -->
</div>

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: black;
    .spinner{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-.5, -.5);
        background-color: white;
        .drip {
            top: -100%;
            background-color: red;
            border-radius: 100%;
            width: 15px;
            height: 15px;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
        }
    }
}
.red {
//  animation: spinning 1s linear 0 infinite normal ;
  animation-name: spinning;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

• demo

[xvno]

Refs

MDN
click popup