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学习笔记(二)的更多相关文章

  1. 从今天开始 每天记录HTML,CSS 部分的学习笔记

    从今天开始 每天记录HTML,CSS 部分的学习笔记

  2. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  3. Android Animation学习(二) ApiDemos解析:基本Animators使用

    Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...

  4. html css的简单学习(二)

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  5. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  6. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  7. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  8. [读书笔记]C#学习笔记一: .Net Framwork

    前言: 一次偶然的机会  在园子里看到@Learning hard 出版的一本书: <<C#学习笔记>>, 然后买来 一直到现在读完, 感觉很不错, 适合入门, 书中内容是从C ...

  9. [读书笔记]C#学习笔记三: C#类型详解..

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

随机推荐

  1. js如何获取asp.net服务器端控件的值(label,textbox,dropdownlist,radiobuttonlist等)

    js如何获取asp.net服务器端控件的值(label,textbox,dropdownlist,radiobuttonlist等) 欢迎访问原稿:http://hi.baidu.com/2wixia ...

  2. protected: C++ access control works on per-class basis, not on per-object basis

    一个很简单的问题: //为什么BASE::foo()中可以直接通过p访问val? 看本记录标题,这个问题困扰了很长一段时间,终于解决class BASE {      private:        ...

  3. ABBYY FineReader Pro for Mac系统要求

    ABBYY FineReader Pro for Mac作为先进的OCR图文识别软件,为各种各样的任务提供全面的解决方案,可轻松将纸质文档.PDF文件和数字文本照片转换为可编辑和可搜索的文件,替代了手 ...

  4. webApi2 上传大文件代码

    上传大文件,取消内存缓存: GlobalConfiguration.Configuration.Services.Replace(typeof(IHostBufferPolicySelector), ...

  5. mysql中json_object函数的使用?

    需求说明: 今天看了json_object函数的使用,在此记录下使用过程 操作过程: 1.使用json_object函数将一个键值对列表转换成json对象 mysql> select json_ ...

  6. Connect to a ROS Network---2

    原创博文:转载请标明出处(周学伟):http://www.cnblogs.com/zxouxuewei/tag/ 一.Introduction ROS网络由单个ROS主机和多个ROS节点组成. ROS ...

  7. centos下快速安装JDK

    Linux系统自带了jdk(当然,如果没有,可以忽略这个步骤),但还是1.4的老版本,所以需要先卸载,然后在安装1.6,卸载步骤如下: [root@localhost ~]# rpm -qa | gr ...

  8. ios开发之NSString用strong还是用copy?

    代码如下: 1,声明 @property(nonatomic,strong)NSString *firstName; @property(nonatomic,copy)NSString *second ...

  9. if条件和for循环语句、while、do..while、switch语法

    //if 语句 ; ) { NSLog(@"不及格"); }) { NSLog(@"及格"); } //if语句 判断条件存在多个情况下,判断一个年是否为润年 ...

  10. windows 下获取当前进程的线程数量

    #include <TlHelp32.h> int get_thread_amount() { ; ]; PROCESSENTRY32 pe32; pe32.dwSize = sizeof ...