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. C++走向远洋——30(六周,项目一1.0)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:fenshu.cpp * 作者:常轩 * 微信公众号:World ...

  2. intel硬件视频加速介绍

    目录 硬件视频加速技术 intel 硬件加速技术 intel 的开源媒体栈 VA-API 安装 样例 Intel Quick Sync(QSV) API支持情况 vaapi/mfx比较 安装 样例 硬 ...

  3. 简单谈谈HashMap

    概述 面试Java基础,HashMap可以说是一个绕不过去的基础容器,哪怕其他容器都不问,HashMap也是不能不问的. 除了HashMap,还有HashTable跟ConcurrentHashMap ...

  4. disruptor 多生产者多消费者实战 四

    一.创建event类 Order public class Order { private String id; private String name; private double price; ...

  5. axios下载文件乱码问题 无法解压 文件损坏

    /* 下载附件 */ downloadFile(fileName) { // window.open(url); var that = this; var url = "PO2116&quo ...

  6. ES6语法:var、let、const的区别详解

    今天来说说es6的语法,最基础的也就是var,let,const 的用法与区别了,我们来看看他们之间的恩怨情仇. 首先来说说var,这个只要是学过js的都知道,它是用来声明一个变量的,但是它在开发中也 ...

  7. Redis01——Redis究竟支持哪些数据结构

    Redis已经越来越多地应用到互联网技术中,而关于Redis的相关问题,也成为面试中必不可少的一部分,本文开始将会逐渐把我了解到的关于Redis的一些面试问题整理出来,供各位参考,如有不对之处,烦请指 ...

  8. 单链表反转的原理和python代码实现

    链表是一种基础的数据结构,也是算法学习的重中之重.其中单链表反转是一个经常会被考察到的知识点. 单链表反转是将一个给定顺序的单链表通过算法转为逆序排列,尽管听起来很简单,但要通过算法实现也并不是非常容 ...

  9. flask连接数据库的URI书写格式

    1. MySQL mysql://username:password@hostname/database 2. PostgreSQL postgresql://username:password@ho ...

  10. Core + Vue 后台管理基础框架4——前端授权

    1.前言 上篇,我们讲了后端的授权.与后端不同,前端主要是通过功能入口如菜单.按钮的显隐来控制授权的.具体来讲,就是根据指定用户的制定权限来加载对应侧边栏菜单和页面内的功能按钮.我们一个个来讲. 2. ...