CSS3 动画

目录

1. 定义动画
2. animation 属性
3. animation 属性的兼容
4. animation与transition 属性的取别
5. animate.css 动画库
6. 动画的调试及优化

定义动画
为了实现动画所以必须准备一个动画剧本:

 /* 当动画只用两个关键帧时可以使用该方式定义关键帧 */
@keyframes mymove{
  from {
    /* 初始状态属性 */
  }
  to {
    /* 结束状态属性 */
  }
} /* 当动画有多个关键帧可以使用该方式定义关键帧 */
@keyframes mymove {
  0%{
    /* 初始状态属性 */
  }
/* 可以添加多个动画帧 */
  100%{
    /* 结束状态属性 */
  }
}
/* (中间再可以添加关键帧)*/

animation 属性

  1. animation-name 检索或设置对象所应用的动画名称

 @keyframes mymove{
/* ... */
} animation-name:mymove;

说明:必须与规则@keyframes配合使用,如果要设置几个animation给一个元素,我们只需用逗号隔开

  2. animation-duration  检索或设置对象动画的持续时间

animation-duration: 3s; 

说明:animation-duration:3s;   动画完成使用的时间为3s
默认值为 0

  3. animation-delay  检索或设置对象动画延迟的时间

animation-delay:0.5s

说明:animation-delay:0.5s;     动画开始前延迟的时间为0.5s
默认值为 0

  4. animation-iteration-count  检索或设置对象动画的循环次数

animation-iteration-count: infinite | number;

取值说明:

  • infinite:无限循环
  • number: 循环的次数
  • 默认值为 1

  5. animation-direction  检索或设置对象动画在循环中是否反向运动

animation-direction: reverse; 

取值说明:

  • normal:正常方向
  • reverse:反方向运行
  • alternate:动画先正常运行再反方向运行,并持续交替运行
  • alternate-reverse:动画先反运行再正方向运行,并持续交替运行
  • 默认值为 normal

  6. animation-play-state  检索或设置对象动画的状态

animation-play-state: paused;

取值说明:

  • running:运动
  • paused: 暂停
  • animation-play-state:paused;   当鼠标经过时动画停止,鼠标移开动画继续执行
  • 默认值 running:运动

  7. animation-fill-mode: forwards;属性规定动画在播放之前或之后,其动画效果是否可见。

animation-fill-mode: forwards; 

取值说明:

  • none :默认值,不做任何改变
  • forwards 停留在最后一个步骤
  • backwards 使用元素的起始值。
  • both 动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。

  8. animation-timing-function  检索或设置对象动画的过渡类型

animation-timing-function: linear;

取值说明:

  • linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  • ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  • ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  • ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  • ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  • cubic-bezier(n,n,n,n) 在立方贝塞尔函数中定义速度函数。 可能的值是从0到1的数字值, 测试网站 https://cubic-bezier.com
  • step-start: 马上跳到动画每一结束桢的状态
  • steps() 函数用于把整个操作领域切分为相同大小的间隔,每个间隔都是相等的。
    • 语法:steps(number[, end | start])
    • number参数指定了时间函数中的间隔数量(必须是正整数)
    • 第二个参数是可选的,可设值:start和end,表示在每个间隔的起点或是终点发生阶跃变化,如果忽略,默认是end。
  • 默认值为 ease

  

  9. animation复合属性。检索或设置对象所应用的动画特效。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性值说明:

  • name -> 表示动画的名称
  • duration -> 动画时间
  • timing-function -> 动画速度曲线
  • delay -> 动画的延迟
  • iteration-count -> 动画的播放次数
  • direction -> 是否应该轮流反向播放动画
  • fill-mode -> 动画播放之前与播放之后的状态
  • play-state -> 动画的播放与暂停

注意:复合属性的某些属性可以省略。

animation兼容性及兼容性前缀

-webkit-animation: ;
-moz-animation: ;
-o-animation: ;
animation: ; @-webkit-keyframes move{ }
@-moz-keyframes move{ }
@-o-keyframes move{ }
@keyframes move{ }

浏览器的支持情况

animation和transition的区别

相同点:都是随着时间改变元素的属性值。

不同点:
  1. transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;
而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果,css3的animation就需要明确的动画属性值。
  2. 过度属性无法实现复杂的效果
  3. 过渡属性一次鼠标经过只可以发生一次,不能重复发生动画
  4. 动画是需要配合@keyframes来使用
  5. 过度属性无法中间暂停

animate.css 动画库
 CSS3动画库演示地址
  https://daneden.github.io/animate.css/
animate.css 的下载地址
  https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
animate.css 的使用
  1. 引入animate.css

<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">

  2. 给动画元素添加类名

<div class="animated rubberBand"></div>

动画的调试及优化
Google浏览器的控制台中查看animations面板
f12 打开控制台 --> 选择控制台中最右边的三个点 --> 选择More tools --> 选择 Animations --> 在控制台的下方将会显示animations控制面板

Google浏览器rendering面板
f12 打开控制台 --> 选择控制台中最右边的三个点 --> 选择More tools --> 选择 rendering --> 下方将会显示rendering 面板
性能优化https://www.jianshu.com/p/eaf4cfc07eac

CSS3动画的使用以及优化的更多相关文章

  1. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  2. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  3. WEB 移动端 CSS3动画性能 优化

    很多时候,我们在开发移动端的时候要使自己的网页兼容不同的机型,很多时候会采用CSS3动画,但是很多时候在安卓机下,动画明显会出现卡顿,很难看,那么这里我介绍几个CSS 属性进行硬件加速那么就会得到明显 ...

  4. css3动画的性能优化_针对移动端卡顿问题

    这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...

  5. css3动画的性能优化

    目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-t ...

  6. 显示层封装及实现与优化(无动画+css3动画+js动画)

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  8. 优秀教程:使用 CSS3 动画实现的超炫的过渡特效

    Codrops 最近分享了一些很酷的图片切换灵感.有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片.状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为. ...

  9. CSS3动画(性能篇)

    写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...

随机推荐

  1. 一篇文章带您读懂List集合(源码分析)

    今天要分享的Java集合是List,主要是针对它的常见实现类ArrayList进行讲解 内容目录 什么是List核心方法源码剖析1.文档注释2.构造方法3.add()3.remove()如何提升Arr ...

  2. 【阿里云IoT+YF3300】16.云端一体化,天猫精灵操控YF3300

    “你好天猫精灵”,“主人有什么吩咐”,“打开灯”,“好的,灯已打开”.对于这样的对话应该大多数人都很熟悉,这就是智能家居的缩影.对于现在市面上层出不穷的智能家居系统,功能越来越繁杂,可是因为开发难度高 ...

  3. python自己做计算器

    题目: exp = '1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4*3)/ (16-3*2) ...

  4. 密码学习(一)——Base64

    简介 Base64是一种非常常用的数据编码方式,标准Base64可以把所有的数据用"A~Z,a~z,0~9,+,/,="共65个字符(‘=’号仅是一个占位符,作为后缀)表示,当然在 ...

  5. AE脚本:把SubRip/SRT/TXT/VTT字幕导入到AE

    脚本介绍 如果您需要在视频中嵌入字幕以进行网络或磁带传送,那么这个脚本则非常有用.可以将SubRip/SRT/TXT/VTT字幕格式文件通过 pt_ImportSubtitles脚本直接加载到AE软件 ...

  6. 先导篇:SpringCloud介绍篇

    1.什么是SpringCloud Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载 ...

  7. 30分钟学会Objective-C

    注: 本文首发于我的个人博客:https://evilpan.com/2019/04/05/objc-basics/ 请原谅我的标题党.但是如果你有其他语言的学习经验,要学习Objective-C的语 ...

  8. 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...

  9. CSS3实现一个旋转的花朵

    要效果图如下: 实现原理:其实很简单,就是中间的圆圈定位在中间,其他的6个圆圈,进行不同的绝对定位,然后进行旋转!代码: <!DOCTYPE html> <html lang=&qu ...

  10. java的权限控制

    java有三个权限的关键字:public.private.protected public:对任何人都可以使用. private:只有类的创建者和内部的方法可以使用,它的导出类也不可以访问. prot ...