css3常用动画效果大全（css3各种动画的基本使用方法）
css3常用动画效果大全（css3各种动画的基本使用方法）2d旋转一个值：水平方向移动的距离2d变换2d平移两个值：
过渡属性过渡就是元素从一种样式逐渐改变为另一种的效果，一定要添加过渡持续时间才有过渡效果 transition: 要过渡的属性 【持续的时间】 延迟时间 速度类型;
- transition-property: all width height;过渡的属性
取值：
- all 过渡的所有属性
- property 要过渡的属性
- none 没有过渡的属性
- transition-duration: 2s 1s;过渡持续的时间，必需项，不写或为0都是没有过渡
- transition-delay：2s 1000ms; 过渡的延迟时间，等待几秒开始过渡
- transition-timing-function: ease;过渡的速度类型
取值：
- ease：默认值（慢-快-慢）
- ease-in 【慢速结束】的运动 （加速）
- ease-out 【慢速结束】的运动 (减速)
- ease-in-out【慢速开始慢速结束】的运动（开始加速最后减速）
- linear 【匀速】的运动
- cubic-bezier(1 0.16 0 1.02)，自己定义贝塞尔曲线的速度类型
div{
transition: all 3s 2s linear;
}
css3变换：
- transform属性 大多数浏览器都支持，默认值为none 也可以设置函数来进行变换
2d变换
- css3中2d变换坐标轴：水平向右是x轴正值，垂直向下是y轴正值
2d平移
- transform:translate(x y) 2d平移
两个值：
- 水平方向平移距离20px，正值向右移动距离20px，负值向左移动
- 垂直方向平移距离，正值向下移动，负值向上移动
一个值：水平方向移动的距离
- 指定方向写法：
- translateX(20px) 指定水平方向移动距离
- translateY(20px) 指定垂直方向移动距离
2d旋转
- transform：rotate(deg) 2d旋转
- 取值：
- 正值：顺时针
- 负值：逆时针
2d缩放
- transform：scale(x y) 默认值为1
- 两个值：元素的宽，元素的高
- 一个值：宽高同比例的缩放
取值
- 值在0-1之间 ：缩小
- 值>1：放大
- 值<0：先翻转后缩放
指定方向进行缩放
- scaleX()指定宽度缩放
- scaleY()指定高度缩放
2d倾斜(拉伸)
- transform：skew(x y) 元素倾斜改变元素在页面中的形状
- 两个值：水平方向和垂直方向同时倾斜
- 一个值：只有水平方向倾斜，第二个值不写就是0
- 取值：角度
指定方向进行倾斜
- skewX() 仅水平方向(X轴)倾斜
- skewY() 仅垂直方向(Y轴)倾斜
示意图：
transform:skew(30deg 10deg);倾斜效果如下图1
transform:skewX(30deg);倾斜效果如下图2
transform:skewY(10deg);倾斜效果如下图3
注意：多个变形用空格分隔
transform: rotate(360deg) scale(0.5);
- transform-origin:改变元素的变换原点
- 取值： 水平：left center right 垂直：top center bottom
- 注意：只写一个方向，另一个默认居中
3d变换
- css3中3d变换坐标轴：水平向右是x轴正值，垂直向下是y轴正值 向前是z轴的正值
- transform-style:规定嵌套的子元素是否以3d空间展示
- preserve-3d:让子元素保留其3d位置
- flat：不保留其3d位置
- 注意：不能和overflow:hidden同时使用，会让子元素的3d空间失效
- perspective:数值
- 视距，让3d元素有近大远小的效果
- 建议500p-800px
3d的平移
- transform:translateZ(npx) 3d沿z轴平移
- 正值：向前移动
- 负值：向后移动 transform:translate3d(x x z) 同时移动3个方向的距离
3d的旋转
- transform:
- rotateX(deg) 正值：向里面，负值：向外面
- rotateY(deg) 正值：向右，负值：向左
- rotateZ(deg) 正值：顺时针，负值：逆时针
- transform: rotate3d(1 1 1 45deg);
3d的缩放
- transform: scaleZ():z轴的缩放大小 scale3d(1.2 1.2 1.2)三个方向进行缩放
盒子水平垂直居中的小技巧
- 在不知道宽高的时候，可以通过transform:translate()来实现盒子的水平垂直居中，使用时要考虑到兼容性问题
.wrap{
position:relative
}
.wrap2 div{
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
css3帧动画
1. 定义动画（关键帧）
@keyframes 动画名称 {
from{}
to{}
}
@keyframes 动画名称 {
0%{} 动画的开始
30%{}
50%{}
....
100%{} 动画的结束
}
注意：动画名称是英文，名字自定义，比如：move scale
2. 调用动画
- animation: animation-name animation-duration animation-timing-function animation-delay animation-direction animation-fill-mode 【动画名称 动画时间】 动画速度类型 动画的延迟时间 动画是否反向 动画是否保持最初或最后的状态
- animation-name 规定需要绑定到选择器的 keyframe 名称。。
- animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线。
- linear 匀速
- ease
- ease-in
- ease-out
- ease-in-out
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。
- n 动画n次，默认是1次
- infinite 无穷次
- animation-direction 规定是否应该轮流反向播放动画。
- reverse 反向播
- alternate 正向反向轮流播
- normal 正向播
- animation-fill-mode 动画是否保持第一帧或者最后一真的状态
- forwards: 动画结束保持最后一帧的状态
- both: 动画结束保持最后一帧的状态 动画未开始时保持第一帧状态
- backwards: 动画未开始时保持第一帧状态，需要配合延迟才能看出效果
- 注意： animation-duration 属性，默认值为0，需要设置该属性，否则不会播放动画
3. 动画库
- animate.css css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等动画效果；
- 官网网址：animate.style
- 使用方法：
1) 引入css动画库
<link rel="stylesheet" href="./css/animate.css">
2) 找到标签，添加基本类名animate__animated，和动画类名animate__pulse
<div class="animate__animated animate__pulse">我是文本</div>
