摘要：一过渡一的作用二的属性二和动画一动画序列书写简例二书写简例常用属性简写属性三完整动画简例代码三转换一转换缩放移动旋转设置元素转换的中心点综合性写法二转换三维坐标系透视呈现位移旋转一过渡一的作用如果你有一个盒子，他的体内也有个小盒子。
“看清animation，transform， @keyframes，transition这四个的脸，以后这四个来了就是要做动画了，看好你们的网页，除了这四个，谁管你们都不好使。”
如果你有一个盒子，他的体内也有个小盒子。现在我们想把鼠标放上去他就能变大。
<style> .father { width: 200px; height: 200px; background-color: pink; } .son { width: 100px; height: 100px; background-color: skyblue; }style><body> <div class="father"> <div class="son">div> div>body>效果如下：
现在我们给他添加鼠标放上去子盒子变大效果
<style> .son:hover { width: 160px; height: 160px; }style>效果如下：
但是这样是鼠标放上去立刻变大，一点也不美观。如果要有个从小变大就好了，此时我们就可以请出第一位大佬————transition
.son { width: 100px; height: 100px; background-color: skyblue; transition: all 0.6s; }效果就变为：
这就是transition的作用,transition 属性设置元素当过渡效果
transition 属性设置元素当过渡效果，四个简写属性为：
1.transition-property
2.transition-duration
3.transition-timing-function
4.transition-delay
其中他的复写方式：
transition：transition-property transition-duration transition-timing-function transition-delay；
动画基本使用
先定义动画 用@Keyframes定义动画（类似定义类选择器） 再animation调用动画@keyframes负责定义动画
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
1.0%是动画的开始，100%是动画的结束。这样的规则就是动画序列
2.在@Keyframes中规定某种css样式。就能创建由当前样式逐渐改为新样式的动画效果
3.动画是使元素从一种样式逐渐变化为另一个样式的效果，可以改变任意多个样式任意多的动画效果
4.请用百分比来规定变化发生的时间，或者使用关键词from和to，等于0%和100%
5.动画序列可以做多个动画的状态的变化Keyframe关键帧,里面的百分比要是整数，是整体时间划分
@keyframes move { /* 开始状态 */ 0% { transform: translate(0px); } /* 结束状态 */ 100% { transform: translate(500px, 0); } }当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
/* 动画名称 */ animation-name: move; /* 持续时间 */animation-duration: 10s; /* 播放次数 */ animation-iteration-count: infinite;1.animation
2.animation-timing-function
一.语法：
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
二.注意：
1.简写属性里面不包含animation-play-state属性
2.暂停动画：animation-play-state：puased;经常和鼠标经过等其他配合使用
3.想要动画走回来而不是直接跳回来：animation-direction:alternate;
4.盒子动画结束后，停在结束位置animation-fill-mode:forward
三.所以上面的简例可以简写为：
animation: move 10s infinite; <div>div> @keyframes move { /* 开始状态 */ 0% { transform: translate(0px); } /* 结束状态 */ 100% { transform: translate(500px, 0); } } div { width: 300px; height: 300px; background-color: pink; /* 动画名称 */ animation-name: move; /* 持续时间 */ animation-duration: 10s; /* 播放次数 */ animation-iteration-count: infinite; }效果如下：
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放
缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。
1.语法：
transform:scale(x,y);
2.总结：
宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
1.语法：
transform: translate(x,y);
2.总结：
定义 2D 转换，沿着 X 和 Y 轴移动元素
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
1.语法：
transform:rotate(angle)
2.总结：
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点
1.语法:transform-origin:x y;
2.注意
注意后面的参数x和y是空格隔开
xy默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名称（top bottom left right center）
1.语法：transform:translate() rotate() scale()…
2.注意：
其顺序会影响转换的效果，先旋转会改变坐标轴方向
当我们同时有位移和其他属性等等时候，记得要将位移放在最前面
一个元素可以添加多个动画，逗号分割
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
1.在2d平面产生近大远小的视觉立体，但是只是效果二维的
2.如果想要在网页产生3D效果需要透视（理解为3D物体投影在2D平面上）
3.透视我们也称为视距，视距就是人的眼睛到视频的距离
4.距离视觉点越近在电脑平面成像越大，越远成像越小
5.透视的单位是像素
6.透视写在被观察元素的父盒子上面的
控制子元素是否开启三维立体空间
代码给父级，但是影响的是子盒子
属性：
1.语法：
transform:translateX(…px)
transform:translateY(…px)
transform:translateZ(…px)
transform:translate3d(x,y,z)其中x,y,z分别指要移动的轴的方向的距离
复写：transform：translateX（） translateY（） translateZ（）
可以让元素在三维平面沿着x轴，y轴，z轴或者自定义轴进行旋转
语法：
transform:rotateX(45deg)沿着x轴进行旋转
transform:rotateY(45deg)沿着y轴进行旋转
transform:rotateZ(45deg)沿着y轴进行旋转
transform:rotate3d(x,y,z,45deg)沿着自定义轴旋转deg角度
其中transform:rotateX(45deg)沿着x轴进行旋转方向判断参考左手手准则
transform:rotateY(45deg)沿着y轴进行旋转判断参考左手手准则
此时大拇指的方向改为指向下，即y轴正方向
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/123061.html
摘要：前瞻目前正在探究通过的多线程来提供更好的动画效果，而不会触发重布局及样式重计算结论动画给予了页面丰富的视觉体验。最好提前申明动画，这样能让浏览器提前对动画进行优化。 正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录...
摘要：前瞻目前正在探究通过的多线程来提供更好的动画效果，而不会触发重布局及样式重计算结论动画给予了页面丰富的视觉体验。最好提前申明动画，这样能让浏览器提前对动画进行优化。 正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录...
摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。 动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...
摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...
阅读 2099·2021-11-11 16:55
阅读 3169·2021-10-11 10:58
阅读 3036·2021-09-13 10:28
阅读 3966·2021-07-26 23:57
阅读 1004·2019-08-30 15:56
阅读 1330·2019-08-29 13:15
阅读 1257·2019-08-26 18:18
阅读 1263·2019-08-26 13:44
