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月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
449 3
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
309 2
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
1684 0
CSS3 animation 全屏图片切换动画
CSS3 animation 全屏图片切换动画
168 0
CSS3 animation 大海波涛动画
CSS3 animation 大海波涛动画
226 0
CSS3 animation 无缝滚动,鼠标悬浮暂停
CSS3 animation 无缝滚动,鼠标悬浮暂停
228 0
|
前端开发
【不一样的CSS】这些关于transition和animation的小细节,你知道吗?
关于transition和animation这两个CSS3属性想必大家都知道,这两个属性都是非常常用的属性,本篇文章来介绍一下关于transition和animation这两个的细节。
328 0
【不一样的CSS】这些关于transition和animation的小细节,你知道吗?
CSS3动画属性之Animation
CSS3动画属性之Animation
304 0
11、CSS3的动画效果(animation)
11、CSS3的动画效果(animation)
276 0
11、CSS3的动画效果(animation)
|
前端开发 API UED
W3C发布CSS ANIMATION WORKLET API的草案
W3C发布CSS ANIMATION WORKLET API的草案
410 0
W3C发布CSS ANIMATION WORKLET API的草案

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    449
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    350
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    335
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    226
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    449
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    623
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    925
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    238
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    757
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    417