前端CSS3动画animation用法

学习如下动画属性

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation-play-state
  • animation

1. @keyframes

@keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式

要使动画生效,必须将动画绑定到某个元素


用法1

点击查看代码
@keyframes anim {
from {background-color: red;}
to {background-color: blue;}
}

anim为动画的名称

from定义动画开始时小方块的背景色为红色

from定义动画结束时小方块的背景色为蓝色


用法2

点击查看代码
@keyframes anim {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

0%定义动画开始(完成0%)时小方块的背景色为红色

25%定义动画在完成25%时小方块的背景色为黄色

50%定义动画在完成50%时小方块的背景色为蓝色

100%定义动画结束(完成100%)时小方块的背景色为绿色


2. animation-name

@keyframes anim { ... }

anim就是动画的名称


3. animation-duration

动画完成一个周期应花费的时间(以秒或毫秒为单位)

animation-duration: 2s | 2000ms;


4. animation-delay

动画开始的延迟时间(以秒或毫秒为单位)

允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画(也就是动画提前两秒开始)

animation-delay: 2s;


5. animation-iteration-count

动画应播放的次数

animation-iteration-count: 3;


6. animation-direction

动画是向前播放、向后播放还是交替播放

animation-direction: normal | alternate;

  • normal:(默认)动画应该正常播放
  • alternate:动画应该轮流反向播放

7. animation-timing-function

动画的速度曲线

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

  • linear:动画从头到尾的速度是相同的
  • ease:(默认)动画以低速开始,然后加快,在结束前变慢
  • ease-in:动画以低速开始
  • ease-out:动画以低速结束
  • ease-in-out:动画以低速开始和结束
  • cubic-bezier(n,n,n,n):在cubic-bezier函数中自己的值。可能的值是从0到1的数值

8. animation-fill-mode

元素在不播放动画时的样式(在开始前、结束后,或两者同时)

animation-fill-mode : none | forwards | backwards | both;

  • none:(默认)不改变
  • forwards:当动画完成后,保持最后一个属性值(在最后一 个关键帧中定义)
  • backwards:在animation-delay所指定的一段时间内, 在动画显示之前,应用开始属性值(在第一个关键帧中定义)
  • both:向前和向后填充模式都被应用

9. animation-play-state

动画的运行与暂停

animation-play-state: paused | running;

  • paused:规定动画已暂停
  • running:规定动画正在播放

10. animation

设置所有动画属性的简写属性

animation: name duration timing-function delay iteration-count direction;

动画名称 动画时长 动画速度曲线 动画延时 动画播放次数 动画是否应该轮流反向播放

前端CSS3动画animation用法的更多相关文章

  1. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  2. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  3. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  4. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  5. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  6. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  7. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. 进入css3动画世界(二)

    进入css3动画世界(二) 今天主要来讲transition和transform入门,以后会用这两种属性配合做一些动效. 注:本文面向前端css3动画入门人员,我对这个也了解不深,如本文写的有纰漏请指 ...

随机推荐

  1. 【Android开发】APP桌面角标问题

    Demo:https://github.com/baitutang1221/BadgeNumberManager 参考:https://juejin.im/post/59f2e59751882578c ...

  2. vue简单的父子组件之间传值

     todo-list为例子: 代码: 父传子--------------属性  v-bind 子传父--------------$emit <!DOCTYPE html> <html ...

  3. node的两种随起随用静态服务器搭建

      一. anywhere Anywhere是一个随启随用的静态服务器,它可以随时随地将你的当前目录变成一个静态文件服务器的根目录. 1.确定电脑上安装了node.js 2.在当前所在项目文件夹下输入 ...

  4. 微信小程序实战,用vue3实现每日浪漫情话推荐~

    之前做了个恋爱话术微信小程序,实现高情商的恋爱聊天. 但最近突然发现,每天早上给女朋友发一段优美情话可以让她开心一整天,但无奈自己的语言水平确实有限,不能随手拈来,着实让人有点不爽. 不过办法总比困难 ...

  5. Ubuntu20.04搭建web服务器

    其他Ubuntu20以及Ubuntu18系列也可以!

  6. 一键智能Mock,你值得拥有

    ​ 大家好呀,我是一名苦逼的前端开发工程师,为啥苦逼呢,这不,项目下周就要上线了,但是后端还没给我接口,没有接口我就无法调试,工作停滞不前,我也只能坐着干着急. 我报告给了我的老板山哥: 老板,这后端 ...

  7. 2021.12.08 [SHOI2009]会场预约(平衡树游码表)

    2021.12.08 [SHOI2009]会场预约(平衡树游码表) https://www.luogu.com.cn/problem/P2161 题意: 你需要维护一个 在数轴上的线段 的集合 \(S ...

  8. 【多线程与高并发原理篇:3_java内存模型】

    1. 概述 Java 内存模型即 Java Memory Model,简称 JMM.从抽象的角度来看,JMM 定义了线程和主内存之间的抽象关系,线程之间的共享变量存储在主内存中,每个线程都有一个私有的 ...

  9. vue-cli4 vue-config.js配置及其备注

    // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compre ...

  10. Antd Modal 可拖拽移动

    一 目标: 实现antd Modal 弹窗或者其他弹窗的点击标题进行拖拽的效果 二 准备及思录: 1.使用antd  Modal 组件,要想改变位置需要改变Modal style 的left 和top ...