[TOC] ## animation 语法 ``` div:hover { animation: 1s rainbow; } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } ``` 格式 ``` 缩写 div:hover { animation: 1s 1s rainbow linear 3 forwards normal; } 详细 div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; } ``` ### 属性 | 属性 | 描述 | CSS | | --- | --- | --- | | [@keyframes](https://www.runoob.com/cssref/css3-pr-animation-keyframes.html "CSS3 @keyframes 规则") | 规定动画。 | 3 | | [animation](https://www.runoob.com/cssref/css3-pr-animation.html "CSS3 animation 属性") | 所有动画属性的简写属性。 | 3 | | [animation-name](https://www.runoob.com/cssref/css3-pr-animation-name.html "CSS3 animation-name 属性") | 规定 @keyframes 动画的名称。 | 3 | | [animation-duration](https://www.runoob.com/cssref/css3-pr-animation-duration.html "CSS3 animation-duration 属性") | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 | | [animation-timing-function](https://www.runoob.com/cssref/css3-pr-animation-timing-function.html "CSS3 animation-timing-function 属性") | 规定动画的速度曲线。默认是 "ease"。 | 3 | | [animation-fill-mode](https://www.runoob.com/cssref/css3-pr-animation-fill-mode.html "CSS3 animation-fill-mode 属性") | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 | 3 | | [animation-delay](https://www.runoob.com/cssref/css3-pr-animation-delay.html "CSS3 animation-delay 属性") | 规定动画何时开始。默认是 0。 | 3 | | [animation-iteration-count](https://www.runoob.com/cssref/css3-pr-animation-iteration-count.html "CSS3 animation-iteration-count 属性") | 规定动画被播放的次数。默认是 1。 | 3 | | [animation-direction](https://www.runoob.com/cssref/css3-pr-animation-direction.html "CSS3 animation-direction 属性") | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 | | [animation-play-state](https://www.runoob.com/cssref/css3-pr-animation-play-state.html "CSS3 animation-play-state 属性") | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 | ## 示例 无限播放 ``` div:hover { animation: 1s rainbow infinite; } ``` 指定次数 ``` div:hover { animation: 1s rainbow 3; } ```