CSS3 animation

简介: CSS3 animation

  • animation 基础属性详解

```


  • animation 基础使用

```


  • 基础使用效果:



animation 多组动画

```


  • 多组动画效果:



  • animation-timing-function: steps(number)


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 3px; height: 200px; background-color: #000; margin: 100px auto; transform-origin: bottom; animation: run 60s infinite steps(60); } @keyframes run { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"></div> </body> </html>


  • 指定帧数效果:

相关文章
|
6月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
82 2
CSS3 animation 全屏图片切换动画
CSS3 animation 全屏图片切换动画
56 0
CSS3 animation 大海波涛动画
CSS3 animation 大海波涛动画
47 0
CSS3 animation 无缝滚动,鼠标悬浮暂停
CSS3 animation 无缝滚动,鼠标悬浮暂停
91 0
CSS3动画属性之Animation
CSS3动画属性之Animation
101 0
|
前端开发
【不一样的CSS】这些关于transition和animation的小细节,你知道吗?
关于transition和animation这两个CSS3属性想必大家都知道,这两个属性都是非常常用的属性,本篇文章来介绍一下关于transition和animation这两个的细节。
137 0
【不一样的CSS】这些关于transition和animation的小细节,你知道吗?
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
1416 0
11、CSS3的动画效果(animation)
11、CSS3的动画效果(animation)
188 0
11、CSS3的动画效果(animation)
|
前端开发 API UED
W3C发布CSS ANIMATION WORKLET API的草案
W3C发布CSS ANIMATION WORKLET API的草案
225 0
W3C发布CSS ANIMATION WORKLET API的草案
你不知道的css3 transition animation transform
你不知道的css3 transition animation transform