一、css动画相关的几个属性

属性 含义 理解
transform 一种CSS属性。用于修改CSS视觉格式模型的坐标空间。使用它,元素可以被移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。 变形
translate() CSS属性transform的一种可能值。用于移动元素。 平移的变形
transition 一种CSS属性。用于设置过渡样式。为一个元素在不同状态之间切换的时候定义过渡效果。比如在一个元素的不同的伪类之间切换,像是 :hover ,:active 或者通过JavaScript实现的状态变化。 过渡
animation 一种CSS属性。用于设置动画。是一个简写的属性,包含6个属性。 动画

二、transform

1. 语法


transform: matrix(1,2,3,4,5,6);
transform: translate(120px, 50%);
transform;scale(2, 0.5);
transform: rotate(0.5);
transform: skew(30deg, 20deg);
transform: scale(0.5) translate(-100%, -100%)

浏览器兼容前缀:

Chrome/Safari Firefox IE Opera
-webkit -moz -ms -o

2. 示例


<style>
p{
width:200px;
border: thin solid red;
-webkit-transform: translate(200px, 200px);
-moz-transform: translate(200px, 200px)
transform: translate(200px, 200px);
rotate(30deg);
}
</style> <p>啦啦啦</p>

三、translate()

1.语法

translate(tx) /* Equal to translateX(tx) */

translate(tx, ty)

translateX(tx)

translateY(ty)

param:

  • tx,ty:水平、垂直方向的移动距离。可以为 绝对距离,也可以为百分数

注意:它必须写在transform属性里面!!

2. 示例

见一、

四、transition

1.语法

它是一个简写属性。等于:

<transition-property> <transition-duration> <transition-timing-function> <transition-delay>

必不可少的是:

<transition-property> <transition-duration>
transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;

Transitions可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover ,:active 或者通过JavaScript实现的状态变化。

注意:transform属性只对block级元素生效!

2.示例

 <style>
p{
width:200px;
border: thin solid red;
font-size: 16px;
}
p:hover{
border: thick solid green;
font-size: 32px;
}
</style> <p>啦啦啦</p>

五、animation

1. 语法

它是一个简写属性,等于:

<animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-derection> <animation-fill-mode>

各属性详细解释如下表:

属性 作用
name 用来调用@keyframes定义好的动画,与@keyframes定义的动画名称一致
duration 指定元素播放动画所持续的时间
timing-function 规定速度效果的速度曲线,是针对每一个小动画所在时间范围的变换速率
delay 定义在浏览器开始执行动画之前等待的时间,是整个animation执行之前等待的时间
iteration-count 定义动画的播放次数,可选具体次数或者无限(infinite)
direction 设置动画播放方向:normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流,即来回往复进行),alternate-reverse(动画先反运行再正方向运行,并持续交替运行)
fill-mode 控制动画结束后,元素的样式,有四个值:none(回到动画没开始时的状态),forwards(动画结束后动画停留在结束状态),backwords(动画回到第一帧的状态),both(根据animation-direction轮流应用forwards和backwards规则),注意与iteration-count不要冲突(动画执行无限次)

animation: 3s ease-in 1s 2 reverse both paused slidein;
/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s linear 1s slidein;
/* duration | timing-function | delay | name */ animation: 3s slidein;
/* @ duration | name */

2.示例


<style>
.lala {
width:200px;
border: thin solid red;
margin-left: 10px;
font-size: 16px;
animation: mymove 4s linear 0s infinite;
-webkit-animation: mymove 4s linear 0s infinite;
-moz-animation: mymove 4s linear 0s infinite;
-o-animation: mymove 4s linear 0s infinite;
} @-webkit-keyframes mymove {
from {
margin-left: 0;
background:yellow;
} to {
margin-left:100%;
background: green;
}
}
@-moz-keyframes mymove {
from {
margin-left: 0;
background:yellow;
} to {
margin-left:100%;
background: green;
}
}
@-o-keyframes mymove {
from {
margin-left: 0;
background:yellow;
} to {
margin-left:100%;
background: green;
}
}
@keyframes mymove {
from {
margin-left: 0;
background:yellow;
} to {
margin-left:100%;
background: green;
}
}
</style> <p class="lala">啦啦啦</p>

参考资料

https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651554407&idx=2&sn=4e07eeb18ba07031cfe89ad03e34ecea&chksm=802555a6b752dcb0ecb0075ab696b62b52c46ca67dfdb9912b758303d2f3edcb30f36a1c7a19&mpshare=1&scene=1&srcid=0619jmh5bLao0U7Lq6j4qwg0#rd

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

CSS动画复习的更多相关文章

  1. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  2. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  3. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  4. HTML和CSS的复习总结

    HTML(Hypertext Markup Language)超文本标记语言:其核心就是各种标记!<html> HTML页面中的所有内容,都在该标签之内:它主要含<head>和 ...

  5. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  6. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  7. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  8. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  9. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

随机推荐

  1. Android系统--灯光系统驱动编写

    Android系统开发--Android灯光系统tiny4412_led_class驱动编写 框架分析 led_classdev_4412结构体 创建led_classdev_4412结构体 分配结构 ...

  2. java 命令行

    javac 编译 linux平台下:javac -cp ./hadoop-common-2.7.1.jar:./hadoop-mapreduce-client-core-2.7.4.jar: Word ...

  3. C#将字符转换成utf8编码 GB321编码转换

    public static string get_uft8(string unicodeString) { UTF8Encoding utf8 = new UTF8Encoding(); Byte[] ...

  4. numpy中的matrix与array的区别

    Numpy matrices必须是2维的,但是 numpy arrays (ndarrays) 可以是多维的(1D,2D,3D····ND). Matrix是Array的一个小的分支,包含于Array ...

  5. 刻录DVD.Win7系统盘(U盘)

    ZC:Win7x86的U盘安装盘做好之后,U盘 里面会留有 引导信息,在以后不想要它(引导信息)的时候 该如果将它删掉?直接普通的格式化 能行吗? ZC:(20180423)发现,UltraISO制作 ...

  6. 【转】ORACLE的数据类型

    原文;http://linjian004.bokee.com/3916067.html 常用的数据库字段类型如下: 字段类型 中文说明 限制条件 其它说明 CHAR 固定长度字符串 最大长度2000 ...

  7. C#二进制与字符串互转换,十六进制转换为字符串、float、int

    /// <summary>     /// 将 字符串 转成 二进制 “10011100000000011100011111111101” /// </summary> /// ...

  8. Js的cookie

    我们现在清除cookie缓存. 然后发起的请求观察: ============== ============= 已经有cookie的情况下发起请求: 我们在看看第一次没有缓存的情况下,返回的数据:

  9. poj3252 数位dp

    这题不是用10进制储存的,要转化成2进制再计算 dp[i][j][k]   i是位数,j是1的个数,k是0的个数 #include<map> #include<set> #in ...

  10. 卸载全部appx应用(包括应用商店)

    在PowerShell中粘贴: Get-AppXPackage | Remove-AppxPackage