CSS实现动画效果
Posted by xiongmao; tagged with CSS过渡效果 , CSS动画效果 , CSS变形 , CSS旋转 , CSS缩放
目录：
一.过渡效果
过渡
transition-property: 过渡效果
transition-duration: 指定过渡效果的持续时间
时间单位：s 和ms
过渡(trannsition)
-通过过渡可以指定一个属性发生变化时的切换方式
-通过过渡可以创建一些非常好的效果，提升用户的体验
transition-property : 指定过渡的属性,多个属性见使用，隔开,如果所有属性过渡，则使用all关键字
transition-duration: 指定过渡效果的持续时间
单位：s和ms
transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
可选值：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速，后减速
cubic-bezier() 来指定时序函数
https://cubic-bezier.com
steps() 分布执行过渡效果
可以设置一个第二个值：
end，在时间结束时，执行过渡(默认)
start 在时间开始时执行过渡
使用方法：
transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
transition-timing-function: steps(2,start);
transition-delay:过渡效果的延迟，等待一段时间后执行过渡
transition-delay: 2s;
动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
}
.box1{
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-top: 20px;
}
.box1:hover div{
animation-play-state: paused;
}
.box2{
background-color: #bfa;
设置动画 必须设置关键帧
animation-nam : 要对当前元素生效的关键帧的名
animation-name: text;
animation-duration : 动画的执行时间
animation-duration: 4s;
动画的延时
animation-delay: 2s;
animation-timing-function:ease-in-out;
动画执行次数
animation-iteration-count 动画执行的次数
可选值：
次数
infinite 无线执行
animation-iteration-count: infinite;
animation-direction：指定动画运行的方向
可选值：
normal 默认值 从from 向 to 运行 每次都是这样
reverse 从 to 运行 from 每次都是这样
alternate 从from 向to 运行 重复执行动画反向执行
alternate-reverse 从to 向from运行 重复执行动画时方向执行
animation-direction: alternate;
animation-fill-mode: 动画填充模式
可选值：
none 默认值 动画执行完毕回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延迟等待时，元素就会处于开始位置
both 结合 forward 和backwards
animation-play-state: 设置动画的执行状态
可选值：
running 默认值 动画执行
paused 动画暂停
}
动画
动画和过渡类似，都可以实现一些动态效果
不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须要设置一个关键帧，关键帧设置了动画执行的每一个步骤
@keyframes text {
from{
margin-left: 0px;
}
to{
margin-left: 700px;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>三.变形
transform 用来设置变形效果
-平移：
translateX() 沿者x轴方向平移
translateY() 沿者y轴方向平移
translateZ() 沿者z轴方向平移
-平移元素，百分比是相对于自身计算的
z轴变形，旋转以及缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
设置当前网页的视距为800px 人眼距离网页的距离
body{
perspective: 800px;
}
.box1{
width: 200px;
height: 200px;
background-color: #fba;
margin: 200px auto;
transition: 2s;
}
z轴平移：调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视的，
如果需要看见效果必须需设置网页的视距
*/
body{
border: 1px solid red;
}
body:hover .box1{
/*transform: translateZ(800px) translateX(500px); */
旋转可以使元素沿者x y 或 z 旋转指定的角度
rotateX()
rotateY()
rotateZ()
/* transform: rotateZ(180deg) translateZ(400px); */
transform: rotateY(180deg);
是否显示元素的背面
backface-visibility
visible 显示
hidden 不显示
*/
backface-visibility: visible;
}
缩放：scale()
对元素进行缩放的函数
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale() 双方向缩放
transform:scale(2) 缩放两倍
变形原点默认值center
transform-origin:20px 20px;
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>