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 等新特性进行. ...
随机推荐
- Linux 系统安装配置PHP服务(源码安装)
简介: PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要 ...
- winform 应用log4net做日志记录到mysql
1.nuget装log4net 2.nuget控件台装 mysql.data Install-Package mysql.data -version 6.8.3 (太高的版本用不了,切记) 3.修改a ...
- log4net 日志配置及使用
一.log4net按照不同的[LEVEL]级别输出到不同文件 <log4net> <!--错误日志:::记录错误日志--> <!--按日期分割日志文件 一天一个--> ...
- Mybatis中#和$区别（带脑图）
零.引言 使用 #{name} 的时候,MyBatis会进行预编译,防止SQL注入的问题(官方话) 用一个通俗一点的例子来解释,比如有如下MyBatis的SQL语句 21.#{}和${}的区别.png ...
- Obj格式模型 读取
OBJ文件的结构 在一个OBJ文件中,首先有一些以v.vt或vn前缀开头的行指定了所有的顶点.纹理坐标.法线的坐标.然后再由一些以f开头的行指定每一个三角形所对应的顶点.纹理坐标和法线的索引.在顶点. ...
- MyEclipse连接CVS，如果中间经过一层代理，就没法直接联接到CVS了，哪位知道怎么办？
- linux mount 挂接新硬盘
1.先用fdisk -l查看一下,先加入的外设地址名称 2. #fdisk /dev/sdb进入fdisk模式:Command (m for help):p //查看新硬盘的分区Command ( ...
- flex中的注释
flex 2.5.35论文写到此处,遇到点麻烦,随手翻了本书,说下flex中的注释问题.中文版的35页有点问题,所以纠正下. 下面是p31示例 fb2_2.l /* 读取多个文件 */ %option ...
- 75道阿里Java面试题，你能答上几道？
整理了下阿里近几年的java面试题目,大家参考下吧,希望对大家有帮助,可以帮大家查漏补缺. 答对以下这些面试题,可以淘汰掉 80 % 的求职竞争者. 1.hashcode相等两个类一定相等吗?equa ...
- 让 Oracle 11g 32位运作在64位 Windows 上
并非不能运行. 本人安装版未曾尝试,但绿色版倒是运行成功了. 很简单:注册表的位置发生了变化而已! 默认(32位.64位),oracle会读取以下注册表的位置: [HKEY_LOCAL_MA ...