1.过渡-transition
复合属性：transition 取值all 5s linear 3s
含义：css3的transition允许css的属性在一定的时间区间内平滑的过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变种触发，并圆滑的以动画效果改变css的属性值 all====单一属性：transition-property:检索或设置对象中的参与过渡属性 代表某个属性发生告别时，才有过渡显示效果 all代表观察多个值不支持在一个属性中写height，width的多个值一起写 5s====单一属性:transition-duration:检索或设置对象过渡的持续时间 动画的变化时间 3s====单一属性：transition-delay:检索或设置对象延迟过渡的时间 延迟时间，例如鼠标移动上去多久产生变化 linear====单一属性：transition-timing-function:检索或设置对象中过渡动画的动画类型 linear 匀速变化 简写: transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型 ****display:none/block属性无法被支持
2.过渡动画类型
transition-timing-function:检索或设置对象中过渡的动画类型
linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 贝塞尔曲线： 属性值：cubic-bezier() 贝塞尔曲线网址：http://cubic-bezier.com/ 逐帧动画：transition-timing-function:steps(动画执行的步数);
3.动画过渡单一属性
复合属性：transition取值：all 5s linear 3s;
含义：css3的transition允许css的属性值在一定时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变css的属性值 all=====单一属性：transition-property:检索或设置对象中参与过渡动画的属性 5s=====单一属性：transition-duration:检索或设置对象过渡的持续时间 liner======单一属性transition-delay:检索设置对象中过渡的动画类型 3s=====单一属性：transition-timing-function:检索或设置对象延时过渡的时间
简写：
transition：all/具体的属性值如height 运动时间s/ms 延迟时间s/ms 动画类型
具体的属性值无法在复合写法中也多个单独的属性但可以在单一属性中设置多个属性值
例：transition-property:height background width;
表示检索，高度，宽度，背景
4.2D属性-transform
1.平移-translate（）
将元素向指定的方向移动，类似于position中的relative
水平移动：向右移动translate（tx，0）和向左移动translate（-tx，0）; 垂直移动：向上移动translate（0，-ty）和向下移动translate（0，ty）; 对角移动：右下角移动translate（tx,ty）,右上角移动translate（tx，-ty），左上角移动translate（-tx，-ty）和左下角移动translate（-tx，ty） translateX（）：水平方向移动一个对象。对象只向X轴进行移动，如果为正值，对象向右移动；如果值为负值，对象向左移动。 translateY（）：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果为负值，对象向上移动 这两个函数和前面介绍的translate（）函数不同的是每个方向只接收一个值 所以 transform:translate(-100px,0)实际上等于transform:translateX(-100px); transform:translate(0,100px) transform:translateY(-100px);
设置left（定位，内边距，外边距等等）属性会频繁的造成浏览器回流重拍，而transform和opacity（半透明属性）属性不会，因为它是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下 1.可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画，并且运行非常快 2.动画不再绑定到CPU重排，而是通过GPU合成图像，即使允许一个非常负值的javaScript任务，动画仍会很快运行
2.缩放scale（）
让元素根据中心原点对对象进行缩放。默认的值是1.因此0.01到0.99之间的任何值，使元素缩小；而任何大于或等于1.01的值时，其第二个值，让元素显得更大，值为0时元素消失
缩放scale（）函数和translate（）函数的语法非常相似，他可以接受一个值，也可以同时接收两个值，如果只有一个值时，其第二个值默认与第一个值相等
例如： scale(1,1)元素不会由任何变化，而scale(2,2)让元素沿x轴和y轴方向放大两倍 scaleX():相当于scale(sx,1).表示元素只在X轴方向（水平方向）缩放元素，其默认值为1 scaleY():相当于scale(1,sy).表示元素只在Y轴方向（纵轴方向）缩放元素，其默认值为1
scale() 可以设置负值-倒像放大效果 支持x轴y轴单独放大效果 支持输入两个值scale（x，y） 负值时先上下翻转，再缩放
补充：改变中心点的位置
transform-origin:center; center（默认值） left top left bottom left center right top right bottom right center 等等 transform-origin:x y; transform-origin:100px 100px; 从左上角计算，可以输入负值 只写一个值另一个值默认居中 这个属性设置在元素中，不设置在hover中，是用于设置元素的中心点
3.旋转-rotate()
旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转，它主要在二维空间中进行操作，接收一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
平面旋转
transition:rotate(180deg) 正值：顺时针旋转 负值：逆时针旋转
3D旋转，rotateX() /rotateY()
rotateX()方法，元素围绕其X轴给定的度数进行旋转 三维空间，按着x轴进行翻转 rotateY()方法，元素围绕其Y轴给定的度数进行旋转 三维空间，按着y轴进行翻转
transform-origin:; 也可以使用此属性更改中心点，让盒子绕着左上角进行旋转
4.多个属性值(复合写法)
transform:translate() scale() rotate();每个属性值用空格隔开 平移写在缩放前面 先缩放之后会导致位移的步长发生改变 平移写在旋转前面 先旋转会导致x轴y轴的变化，影响平移的方向
总结：
多个属性值可以写在一起，用空格隔开，注意书写顺序，先平移后旋转，先平移再缩放，顺序错误会影响最后的效果
5.倾斜 skew()
倾斜shew()函数能够让元素倾斜显示，它可以将一个对象以其中心位置围绕着x轴和y轴按照一定的角度倾斜。
一个参数时：表示水平方向的倾斜角度； 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角 度
skewX() 在x轴进行倾斜 skewY() 在y轴进行倾斜 skew(x,y) 在x轴和y轴进行倾斜
/* 在x轴拉伸 四边形拉伸的角度相当于 右上角到底边的垂直角度 */ /* skewX 正值 ，拽右下角， 往右边拉动 负值 ，拽左下角， 往左边拉动 */ /* skewY 正值 ，拽右下角， 往下边倾斜 负值 ，拽左下角， 往下倾斜 */ /* skew(x,y) 正值，拽着右下角，向右下边拉动，形成30deg */
5.关键帧动画
animation和transition
相同点： 都是随着时间改变元素的属性值 不同点： transition需要出发一个事件(hover事件或click事件等)才会随事件改变其css属性； 而animation在不需要出发任何事件的情况下也可以显示的随时间变化来改变元素的长沙市的属性值，从而达到一种动画效果，css3的animation就需要明确的动画显示属性
1.基本写法
代码简单分析
animation:mymove 20s ease-in-out 2s ifinite alternate; mymove：动画名称 20s：动画的持续时间 ease-in-out：动画的过度类型 2s：动画的延迟时间 ifinite：动画的循环次数 alternate：动画是否反向运动
要使用animation，必须先写好动画声明
@keyframes identifier(可以直接定义设置名称){
from{
width:200px;
height:200px;
background:red;
}
to{
width:400px;
height:600px;
background:green;
}
}
from{}初始的状态 to{}结束的状态@keyframes run {
0% {
background: red;
transform: translateX(0) rotate(0);
/* 开始动画 */
}
25% {
background: yellow;
transform: translateX(400px) rotate(90deg);
/* 25%的动画 */
}
50% {
background: blue;
transform: translate(400px, 400px);
/*50%的 动画 */
}
75% {
background: green;
transform: translateY(400px) rotate(90deg);
/*75%的 动画 */
}
100% {
background: red;
transform: translateX(0) rotate(0);
/* 结束动画 */
}
}
2.anImation属性
复合写法：
animation:ezr 2s linear infinite 3s reverse forwards running; ezr:动画的名称，匹配相对应的声明中的动画名称，由自己定制 2s：动画的过渡时间 linear：动画的过渡效果，可以设置各种效果 infinite：动画的重复次数，infinite无限次，也可以设置数字，1 循环一次 2 循环2次 此值默认值为1 3s：动画的延时属性 reverse：设置运行放方向 forwards：动画运动介绍，保留最后一帧动画或第一帧动画 running：动画的暂停和播放
单一属性
1.animation-name 检索或设置多谢所应用的动画名称
说明：
必须与规则@keyframes配合使用，例@keyframes mymove{} animation-name:mymove;
2.animation-duration 检索或对象动画的持续时间
说明：
animation-duration:2s; 动画完成使用的时间是2s
3.animation-timing-function 检索或设置对象动画的过渡类型
说明：
linear 匀速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
贝塞尔曲线：
属性值：cubic-bezier()
4.animation-delay 检索或设置对象动画延迟的时间
说明：
animation-delay:0.5s; 动画开始前延迟的时间为0.5s
5.animation-iteration-count 检索或设置对象动画的循环次数
说明：
animation-iteration-count: infinite| number;
infinite：无限循环
number：循环的次数
6.animation-direction 检索或设置对象动画在循环中是否反向运动
说明：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
7.animation-play-state 检索或设置对象动画的状态
说明：
animation-play-state:running | paused;
running ;运动 (默认)
paused: 暂停
animation-play-state:paused;
使用hover可以实现，当鼠标经过时动画停止，鼠标移开动画继续执行
8.animation-fill-mode:none/forwards/backwards;
动画填充模式
none:没有属性，默认值
forwards，保留最后一帧的效果
backwards，保留最初的效果steps
setps(直接进行关键帧跳跃)linear,ease-in... setps（1，end/start） 说明： 1：从一个关键帧到下一个关键帧，一步完成，这个数值越大，表示从一个关键帧到下一个关键帧，需要补充的步数越多 end/start：end保留当前帧看不到最后一帧，动画介绍看不到 start保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧 setps-end===setps(1,end) setps-start====setps(1,start)
3.animate动画库-css3动画库
Animate.css | A cross-browser library of CSS animations.下载网站
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> 在head中用link引入网络地址或者本地地址
<div class="animate__animated animate__bounce"></div> 给元素加上class，前缀animate__animated必须添加，想要什么效果在网页中寻找添加刷新网页即可
实现更改动画的基础属性，有两种方式，
1.在css中添加声明
.animate__animated.animate__bounce {
--animate-duration: 2s;
}2.在class中添加特定的类名
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
具体的属性，及操作方法如下
实用程序类
Animate.css附带了一些实用程序类，以简化其使用。
延迟类
您可以直接在元素的 class 属性上添加延迟，如下所示：
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
Animate.css提供以下延迟：
类名 默认延迟时间
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s
提供的延迟为 1 到 5 秒。您可以自定义它们，将属性设置为更长或更短的持续时间：--animate-delay
/* All delay classes will take 2x longer to start */
:root {
--animate-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--animate-delay: 0.5s;
}
慢、慢、快、快的类
您可以通过添加这些类来控制动画的速度，如下所示：
<div class="animate__animated animate__bounce animate__faster">Example</div>
类名 默认速度时间
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
该类的默认速度为 。您还可以通过属性全局或本地自定义动画持续时间。这将同时影响动画和实用程序类。例：animate__animated1s--animate-duration
/* All animations will take twice as long to finish */
:root {
--animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
--animate-duration: 0.5s;
}
请注意，某些动画的持续时间小于 1 秒。当我们使用 CSS 函数时，通过属性设置持续时间将遵循这些比率。因此，当您更改全局持续时间时，所有动画都将响应该更改！calc()--animation-duration
重复类
您可以通过添加这些类来控制动画的迭代计数，如下所示：
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
类名 默认迭代计数
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite
与延迟和速度类一样，该类基于该属性，并且默认迭代计数为 。您可以通过将属性设置为更长或更短的值来自定义它们：animate__repeat--animate-repeat1--animate-repeat
/* The element will repeat the animation 2x
It's better to set this property locally and not globally or
you might end up with a messy situation */
.my-element {
--animate-repeat: 2;
}
请注意，不使用任何自定义属性，并且对 的更改将不起作用。不要忘记阅读最佳实践部分，以充分利用重复动画。animate__infinite--animate-repeat版权声明：本文为m0_70877859原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。