css笔记 - animation学习笔记(二)

animation动画

@keyframes规则 - 创建动画

from - to 等价于 0% - 100%

但是优先使用0% - 100%，因为浏览器兼容性还好点

animation 动画绑定

将keyframes动画规则绑定到选择器。
必须设定动画的名称和时长。
所有动画属性

animation-name

keyframes动画的名称

属性	含义	备注
动画名称	就是keyframes规定的动画名称	不设置动画不成功
none	设置后无动画效果	如果真的没有动画就不需要设置，但是这个功能的特殊用途用于覆盖级联的动画。

animation-duration

规定动画完成一个周期所花费的秒(.2s)、毫秒(200ms)

animation-timing-function

速度曲线(三次贝塞尔曲线)

属性	含义	备注
linear	匀速运动
ease	慢 - 快 - 慢
ease-in	慢 - 快
ease-out	快 - 慢
ease-in-out	慢 - ~ - 慢
cubic-bezier	自定义	上边这几个属性，都会在关键帧之间插入补间动画。使得动画效果连贯。
steps()函数	逐帧动画	适用于关键帧的跳跃

针对上边五个三次贝塞尔，其对比效果看下边w3c的效果一目了然

<!DOCTYPE html>

<html>

<head>

  <style>

    div {

      width: 100px;

      height: 50px;

      background: red;

      color: white;

      font-weight: bold;

      position: relative;

      animation: mymove 5s infinite;

      -webkit-animation: mymove 5s infinite;

      /* Safari and Chrome */

    }

    #div1 {

      animation-timing-function: cubic-bezier(0, 0, 0.25, 1);

    }

    #div2 {

      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

    }

    #div3 {

      animation-timing-function: cubic-bezier(0.42, 0, 1, 1);

    }

    #div4 {

      animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

    }

    #div5 {

      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

    }

    /* Safari and Chrome: */

    #div1 {

      -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);

    }

    #div2 {

      -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

    }

    #div3 {

      -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);

    }

    #div4 {

      -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

    }

    #div5 {

      -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

    }

    @keyframes mymove {

      from {

        left: 0px;

      }

      to {

        left: 300px;

      }

    }

    @-webkit-keyframes mymove

    /* Safari and Chrome */

      {

      from {

        left: 0px;

      }

      to {

        left: 300px;

      }

    }

  </style>

</head>

<body>

  <p>

    <strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p>

  <div id="div1">linear</div>

  <div id="div2">ease</div>

  <div id="div3">ease-in</div>

  <div id="div4">ease-out</div>

  <div id="div5">ease-in-out</div>

</body>

</html>

特殊的 steps()函数

参数	含义	备注
正整数	指定时间函数中的间隔数量	必须是正整数
start/end	设置最后一步的状态	start为结束时的状态（第一帧是第一步动画结束），end为开始时的状态(第一帧是第一步动画开始)

定义steps的keyframes规则中，所有关键帧必须写出来，

比如我下边这个demo中

    @keyframes bgChange {

      0% {

        background-position-x: 0px;

      }

      20% {

        background-position-x: -90px;

      }

      40% {

        background-position-x: -181px;

      }

      60% {

        background-position-x: -271px;

      }

      80% {

        background-position-x: -359px;

      }

      100% {

        background-position-x: -449px;

      }

    }

如果只改成from{} to{}两帧，动画跑不起来。同样的0% - 100% 也不可以。

animation-delay 延迟动画

动画延迟开始时间

animation-iteration-count: infinite；循环动画

动画播放次数

常用 infinite

animation-direction 反向动画

是否逆向播放

属性	含义
normal	正常播放
alternate	反向

alter： vt. 改变，更改

animation-play-state 暂停动画

是否运行or暂停动画

属性	含义
paused	暂停
running	跑起来，运行

巧妙的运用该属性，鼠标经过的时候设置为运行，鼠标离开即变回默认的暂停状态。

animation-fill-mode

动画时间之外的状态

属性	含义	备注
none	不改变默认行为
forwards	动画完成后，保持最后一个属性值（在最后一个关键帧中定义）	感觉就像定格最后一针的效果不变
backwards	延迟执行时间段内，动画开始前，应用开始属性值（在第一帧中定义）	同上，只不过将变化的第一帧先定格展示出来
both	向前和向后填充模式都被应用。	上边两个结合应用，开始前将第一帧先展示，结束后最后一帧定格不变。

css笔记 - animation学习笔记(二)的更多相关文章

从今天开始每天记录HTML，CSS 部分的学习笔记
从今天开始每天记录HTML,CSS 部分的学习笔记
CSS Grid 布局学习笔记
CSS Grid 布局学习笔记好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
Android Animation学习（二） ApiDemos解析：基本Animators使用
Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...
html css的简单学习（二）
html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...
CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
[读书笔记]C#学习笔记一: .Net Framwork
前言: 一次偶然的机会在园子里看到@Learning hard 出版的一本书: <<C#学习笔记>>, 然后买来一直到现在读完, 感觉很不错, 适合入门, 书中内容是从C ...
[读书笔记]C#学习笔记三: C#类型详解..
前言这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

随机推荐

(转) 解密H264、AAC硬件解码的关键扩展数据处理
出自:http://blog.itpub.net/30168498/viewspace-1576794/ 通过上一篇文章,我们用ffmpeg分离出一个多媒体容器中的音视频数据,但是很可能这 ...
Python WSGI开发随笔
本文记录学习WSGI时的一些知识点,值得后续学习中注意. wsgi应用接口只要是一个可调用的对象就行,这个可调用的对象需要: 1. 接受两个位置参数: a. 包含CGI形式变量的字典: b. 应用调用 ...
linq 根据指定条件返回集合中不重复的元素
原理:先查询出数据,根据指定值分组,然后取第一条映射 1.第一种方法 string sql = string.Format("select*from PoliceLogistcs); db. ...
EF5+MVC4系列(9) Razor视图引擎的核心原理;@符号的使用;输出html的转义
一:Razor视图引擎的核心原理 Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项 ,他是一个视图引擎他的核心原理,就是当读取到 @符号的时候,就认为这是开始 ...
Oracle RAC集群资料收集
RAC优势和劣势 http://tech.it168.com/a2012/0814/1384/000001384756_all.shtml 双机热备与RAC并行模式对比 WAS数据源设置 http:/ ...
level 6 - unit3 -- 非限制性定语从句
非限制性定语从句例子1 he has a son who is a fireman who 引导一个定语从句. who 是修饰前面的son. 翻译的意思:他有一个消防员的儿子 he has a so ...
关于android 内存的笔记
原文 https://developer.android.com/training/articles/memory.html 1.慎重使用Service,最好的办法是使用IntentService,一 ...
栈空间默认1M，测试存进数据时间
#include <stdio.h> 栈空间是1024*1024,一兆1M,其中包含了进入main函数之前的1万左右空间.全空间是足的.速度:栈>全局>堆测试运算时间.100 ...
求字符串长度StringLength();
// StringLength2.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" int StringLength(char str[]) ...
C++ 使用vector时遇到的一个问题
我在测试程序中定义一个存储三维点的结构体,并定义该结构体的vector,当我在向vector插入元素时,编译一直提示错误: 代码片段如下: C++ Code 1234567891011121314 ...