css3各种动画的基本使用方法

小四 2023-01-22 11:42 42次浏览 0 条评论前端

过渡属性

过渡就是元素从一种样式逐渐改变为另一种的效果，一定要添加过渡持续时间才有过渡效果 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);倾斜效果如下图2transform: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 匀速easeease-inease-outease-in-outanimation-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动画库

2) 找到标签，添加基本类名animate__animated，和动画类名animate__pulse