CSS3动画基础
编写页面
记事本或SublimeText或vscode编写html:
<html>
<div id="box"></div>
<style>
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
}
</style>
</html>
加上鼠标悬浮的效果:
<html>
<div id="box"></div>
<style>
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
}
/*鼠标悬浮后的样式*/
#box:hover {
/*向下偏移50px*/
top: 50px;
}
</style>
</html>
效果图如下:
浏览器只渲染出“box”的初始状态, 和鼠标悬浮后的状态"top： 50px;", 效果较为生硬，可以使用"transition"属性丰富视觉效果。
transition属性
transition译作“过渡”，在css3中，transition属性用来设置元素过渡效果。
transition包含4个子属性，分别为:
| 属性 | 说明 | 默认值 |
|---|---|---|
| property | 设置给元素的那个方面添加过渡效果，比如元素的"width"和"height"均发生改变时，可以指定该属性为"width",那么元素的"width"的变动才有过渡效果。"all"表示所有变动都加上过渡效果。 | all |
| duration | 设置过渡效果的持续时间，至少要给transition设置这个子属性，否则transition属性就没意义了。 | 0s |
| timing-function | 过渡函数，该属性决定元素的过渡效果与时间的关系。 | ease |
| delay | delay即为“延迟”，表示该元素在加载后多久才开始过渡效果 | 0s |
这几个元素的顺序如下:
transition: property duration timing-function delay;
修改上面的“#box”样式:
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
/*设置过渡效果 持续1秒，延迟500毫秒才开始*/
transition: 1s 500ms; /*等价于 transition: all 1s ease 500ms */
/*兼容webkit内核*/
-webkit-transition: 1s 500ms;
}
transition属性加在"#box"元素上，表示该元素变换时按设置的效果进行变换。
修改文件后可以发现过渡效果并没有生效，这是因为"#box"没有设置"top"，只是在鼠标悬浮后才出现"top"属性，即解析器没有找到“top”过渡的“初始状态”，“过渡”就应该包含元素的初始状态和最终状态。
给"#box"加上"top: 0;":
#box {
background-color: rgb(246, 96, 78); /*背景色*/
top: 0;
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
/*设置过渡效果 持续1秒，延迟500毫秒才开始*/
transition: 1s 500ms; /*等价于 transition: all 1s ease 500ms */
/*兼容webkit内核*/
-webkit-transition: 1s 500ms;
}
效果如下:
关于timing-function，还可以选择"linear"(线性效果)、"ease-in"(渐进)等，想实现更好玩的效果，可以借助“贝塞尔曲线函数”。
贝塞尔曲线
贝塞尔曲线百度百科
关于贝塞尔曲线，有很多资料，不再赘述。
贝塞尔曲线可视化
这是一个贝塞尔曲线函数可视化的一个网站，用这个网站可以直观地生成合适的动画加速度函数。
如上是网站的界面，函数的参数分别为坐标系上红球的x轴坐标、y轴坐标和蓝绿球的x轴坐标和y轴坐标。坐标系横轴为时间，纵轴为动画的 progress, 直译过来是进程、进展的意思，映射到平移上就是指移动的点到原点的偏移量。曲线的斜率，反映的是动画的加速度。
动图中两个方块是自定义动画与线性动画的对比。自定义动画后面具有弹跳的效果，在左上角坐标系上表现为后段往下的凹陷。动画的整体效果是元素离原点的距离越来越远，到后段反而离近一点点，然后又远离，直至到达终点。
选择合适的函数“cubic-bezier(.37,1.44,.57,.77)”设置到"#box"元素中:
#box {
background-color: rgb(246, 96, 78); /*背景色*/
top: 0;
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
/*兼容webkit内核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}
效果如图:
transform
以上提及的动画效果都是给元素设置初始状态和最终状态，然后让浏览器自动渲染的，这种叫“补间动画”，即定义初始和结束状态，浏览器自动计算并补充“中间的状态”最后渲染出来，“补间动画”在flash，AE之类的软件都可以看到。
上面例子是已经知道了"box"的初始状态"top: 0;"了，那万一有的需求是一开始不知道“box”的位置呢，那该如何使得"box"向下移动？那就是"transform"属性的功劳了。
"transform"就是“改变形态”的意思，就是“汽车人变形”里的“变形”，通过“transform”属性可以改变元素的状态。
transform包含很多的变换效果，一一介绍。
translate
translate是“转变，转为”的意思，在css3中，translate是transform的子属性，用来平移元素。
translate包含如下几种使用方法：
| 名称 | 描述 | 示例 |
|---|---|---|
| translateX(x) | 表示水平移动，x为负是往左，为正则向右移动 | transform: translateX(10px) transform: translateX(-15%) |
| translateY(y) | 竖直移动，y为负向上，为正向下 | 同上 |
| translateZ(z) | 需配合“perspective()”使用，perspective()用来定义“景深”。z为负时是远离用户(屏幕)，正是接近用户 | transform: perspective(500px) translateZ(200px) |
| translate(x, y) | 二维平面的移动，是最前面两个的结合 | 简单 |
| translate(x, y, z) | 三维空间的移动，最前面三个的结合 | 同上 |
把上面的html改成如下，效果一样：
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
/*兼容webkit内核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}
/*鼠标悬浮后的样式*/
#box:hover {
/*向下偏移50px*/
transform: translateY(50px);
/*兼容webkit*/
-webkit-transform: translateY(50px);
}
scale
scale就是缩放的意思，对元素进行缩放变换。包含:
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- scale(x, y)
- scale3d(x, y, z)
用法与translate一致，只是参数是表示缩放的倍数，“1”表示原来的一倍（不放大不缩小），“0.5”缩小到原来一半，“2”变为原来两倍。
transform: scale(.5);
rotate
旋转变换，包含:
- rotate(angle): 最简单的旋转变换，angle为负逆时针，为正是顺时针
- rotateX(angle): 绕着X轴旋转
- rotateY(angle): 绕Y轴旋转
- rotaleZ(angle): 绕Z轴旋转
- rotate3d(x,y,z,angle): 这个复杂一点，是在空间直角坐标系(x,y,z)中选择一个点，然后该点与原点（0,0,0）连成一条线，然后元素绕该线旋转。
- rotate3d(1,0,0,180deg)等价于rotateX(180deg)
- rotate3d(0,1,0,180deg)等价于rotateY(180deg)
- rotate3d(0,0,1,180deg)等价于rotateZ(180deg)
transform: rotate(180deg);
skew
倾斜变换，包含:
- skewX(angle): 相对X轴倾斜,X轴方向上不变，Y轴旋转angle度。
- skewY(angle): 相对Y轴倾斜，同上。
- skew(x-angle, y-angle): 结合起来。
skew不太好理解，结合例子来看：
一、
transform: skewX(45deg);
可以看到“测试字样”在X轴上没有变化，向着Y轴方向旋转45度。
二、
transform: skewY(45deg);
在Y轴方向上没变，"box"的竖边仍与Y轴平行，横边则向着X轴方向旋转45度。
三、
transform: skew(45deg,45deg);
skew不好理解，这里贴出两篇文章：
matrix
矩阵变换，包含:
- matrix(n,n,n,n,n,n)
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
其它的变换都可以由矩阵变换获得，这是线性代数的知识，学的都还给老师了.......
对CSS3中的transform：Matrix（）矩阵的一些理解
perspective
用于定义景深，与上面提到的3d变换配合使用，景深就是元素离眼睛（屏幕）的距离，在电脑上，图形通过变换来让我们眼睛看到的图形产生距离感，大概就是近大远小之类的。
transform: perspective(500px) rotate3d(1, 0, 0, 45deg);
transform-origin
transfor-origin属性用来设置元素变换的基点。默认的，rotate绕元素中点旋转，如果想让元素绕左上角旋转，可以把transform-origin设置为：
transform-orgin: 0% 0%;
示例：
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; /*过渡效果*/
transform-origin: 0% 0%;/*设置动画的基点*/
/*兼容webkit内核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
-webkit-transform-origin: 0% 0%;
}
/*鼠标悬浮后的样式*/
#box:hover {
transform: rotate(45deg);
/*兼容webkit*/
-webkit-transform: rotate(45deg);
}
注意，"transform-origin"属性是放在"#box"上而不是"#box:hover"
animation 和 keyframes
上面提到的动画均为补间动画，自定义初始和结束的状态，由浏览器计算渲染中间状态。这些初始和结束的关键状态，可以称为“关键帧”，即“keyframes”。如果我们想实现更为精细的动画效果，想在元素变换的“过程中”也加上特定的“状态”，即插入“关键帧”，可以通过 “keyframes” 和 “animation” 属性实现。
animation包含8个子属性:
| 名称 | 描述 |
|---|---|
| name | keyframe的名称 |
| duration | 持续时间 |
| timing-function | 速度曲线 |
| delay | 延迟多久才开始 |
| iteration-count | 播放的次数,一整个动画流程为一次 |
| direction | 是否在播放完后再反向播放 |
| fill-mode | 动画不播放时的样式 |
| play-state | 动画的状态，正在运行还是暂停 |
keyframe的定义如下:
@keyframes name{
percentage1 {state1}
percentage2 {state2}
}
/*兼容webkit*/
@-webkit-keyframes name{
percentage1 {state1}
percentage2 {state2}
}
name 是关键帧的名称
percentage 是动画周期的时刻百分比，即整个动画周期的第百分之几的时刻，50%表示播放到一半，30%表示动画播放到百分之30.
state 是该时刻的元素状态，如“top: 10px”，此刻元素距离上方的距离。
修改html文件:
<html>
<div id="box" style="line-height: 100px; text-align: center;">测试</div>
<style>
/*关键帧*/
@keyframes test{
0%,20%,50%,80%,100%{transform: translateX(0)}
40%{transform: translateX(30px)}
60%{transform: translateX(15px)}
}
/*兼容*/
@-webkit-keyframes test{
0%,20%,50%,80%,100%{-webkit-transform: translateX(0)}
40%{-webkit-transform: translateX(30px)}
60%{-webkit-transform: translateX(15px)}
}
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s linear 500ms; /*过渡效果*/
-webkit-transition: 1s linear 500ms; /*过渡效果，兼容webkit内核*/
}
/*鼠标悬浮后的样式*/
#box:hover {
animation:test 1s 0s ease both; /*绑定关键帧*/
-webkit-animation: test 1s 0s ease both; /*兼容*/
}
</style>
</html>
效果：
CSS3动画基础的更多相关文章
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
- css3动画基础详解（@keyframes和animation）
我们经常会看到CSS3能制作出很炫酷的动画效果,但是自己却只能做一些简单的.原因是对CSS3动画只知其一,不知其二.最近正好有做动画的项目,于是花时间将css3动画做了一个探究之旅,记录在册. 动画是 ...
- [转]WebKit CSS3 动画基础
前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下.首先看看效果http://www.css88.com/demo/css3_Animation/ 很悲剧的是css3动画现在只有WebK ...
- 如何快速上手基础的CSS3动画
前言 说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,比如旋转.倾斜.位移等,trans ...
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- CSS3动画基本的转换和过渡
理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...
- CSS3学习（CSS3过渡、CSS3动画）
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- CSS3 动画记
css3 动画 在CSS3中可以通过animation创建复杂的动画序列,像transition属性一样用来控制CSS的属性实现动画效果. animation实现动画效果主要由两个部分组成. 通过类似 ...
随机推荐
- Node教程——API接口开发(Node版的CRUD通用接口的搭建）（MangoDB+Express_Version2）
1. 概述 时间跨度有点大,之前就跟大家唠嗑过一些知识点,也开启了一个Node书写一个后台api项目的开始,出于各种原因,迟迟没有更新博文.现在我把这个坑填上,如果你还有阅读过我之前的文章,我建议你先 ...
- R的安装以及包安装
今天看论文,需要用到R语言的库,于是又折腾了半天.. 其实并没有什么太大的问题,只是在第三方包的下载方面还有python中使用R方面遇到了问题: 第三方包的导入 其实在网上有 ...
- LTC6804读写配置寄存器
一.写配置寄存器步骤及函数封装 写配置寄存器 1.把CSB拉低至低电平: 2.发送WRCFG命令(0x00 0x01)及其PEC(0x3D 0x6E): 3.发送配置寄存器的CFGR0字节,然后继续发 ...
- Django路由之url分组（命名）匹配
分组(命名)匹配 urls.py路由配置文件中: urlspatterns中想捕获正则表达式匹配的结果用来出传递给views.py视图函数文件使用,需要用到分组匹配,或者使用第三个参数python字典 ...
- 深入剖析ThreadLocal原理
描述 ThreadLocal,很多地方叫做线程本地变量,也有些地方叫做线程本地存储.ThreadLocal为变量在每个线程中都创建了一个副本,那么每个线程可以访问自己内部的副本变量. 通常使用静态的变 ...
- Python - 常用的PyCharm的快捷键和使用场景介绍
关于PyCharm的快捷键,由于数量众多,差不多有100个,相信几乎没有人会记住所有,每个人都会有自己顺手的几个,这里我将自己用着顺手,不别扭的快捷键分享出来,同时分享在哪里可以找到所有的快捷键. 一 ...
- .NET CORE 依赖注入 实践总结
知识点回顾 依赖包. Microsoft.Extensions.DependencyInjection.Abstractions 核心对象和方法. IServiceCollection.注入对象的容器 ...
- 什么，容器太多操作不过来？我选择Docker Compose梭哈
接上一篇:面试官:你说你精通 Docker,那你来详细说说 Dockerfile 吧 一.容器之间通信 1.单向通信 1.1.什么意思 mysql和tomcat是两个独立的容器,但是tomcat需要和 ...
- [Wireshark]_003_电子邮件抓包分析
电子邮件是我们的生活工作中经常使用的一种服务,用来联系世界各地的朋友,客户.下面我们就用Wireshark对电子邮件进行抓包. 准备工作: 邮件客户端一款(Outlook,Foxmail,KooMai ...
- JVM系列.JDK演进历史
Java程序员为什么要了解虚拟机相关的知识 Java程序在设计之初就号称"一次编译,到处运行".Java之所以能做到"一次编译,处处运行"是因为Java虚拟机隐 ...