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>


  • 指定帧数效果:

相关文章
|
7月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
103 2
CSS3 animation 全屏图片切换动画
CSS3 animation 全屏图片切换动画
58 0
CSS3 animation 大海波涛动画
CSS3 animation 大海波涛动画
52 0
CSS3 animation 无缝滚动,鼠标悬浮暂停
CSS3 animation 无缝滚动,鼠标悬浮暂停
105 0
CSS3动画属性之Animation
CSS3动画属性之Animation
117 0
|
前端开发
【不一样的CSS】这些关于transition和animation的小细节,你知道吗?
关于transition和animation这两个CSS3属性想必大家都知道,这两个属性都是非常常用的属性,本篇文章来介绍一下关于transition和animation这两个的细节。
143 0
【不一样的CSS】这些关于transition和animation的小细节,你知道吗?
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
1430 0
11、CSS3的动画效果(animation)
11、CSS3的动画效果(animation)
195 0
11、CSS3的动画效果(animation)
|
前端开发 API UED
W3C发布CSS ANIMATION WORKLET API的草案
W3C发布CSS ANIMATION WORKLET API的草案
236 0
W3C发布CSS ANIMATION WORKLET API的草案
|
前端开发
嘿,朋友,其实 CSS 动画超简单的 - animation 动画篇(配备各属性详解)
上篇讲完了渐变动画,本篇我们讲一下 animation 动画,animation 动画相比渐变动画来讲功能更丰富,使用也更复杂,不过其中相通之处也很多,建议看完上篇再来看本篇可以更方便吸收。