追境的笔记

# animation 动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值 说明 可取值
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期 linear ease ease-in ease-out ease-in-out
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。 数字N infinite
animation-direction 指定是否应该轮流反向播放动画。 reverse alternate alternate-reverse
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。 paused 指定暂停动画/ running/指定正在运行的动画

匀速转动的loading

@keyframes loading{
    to {
        transform:rotate(1turn);
    }
}
div.loading{
    width:100px;
    height:100px;
    animation: loading 1s 0s linear infinite 
}
1
2
3
4
5
6
7
8
9
10

#

Web Animation (opens new window) Web Animations (opens new window) Animated SVG Icons (opens new window) CSS 动画工具和框架 (opens new window) 动画编辑器 (opens new window) stylie 动画编辑器 (opens new window) http://cssanimate.com/ (opens new window) https://www.shouce.ren/example/show/s/6869 (opens new window)

← LESS IF →