CSS animation
过渡
语法格式：
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
多个属性用逗号隔开
| 属性 | 说明 |
|---|---|
| transition-property | 过渡属性 |
| transition-duration | 花费时间 |
| transition-timing-function | 运动曲线 |
| transition-delay | 开始时间 |
transition-timing-function
div {
width: 200px;
height: 100px;
background-color: pink;
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
}
div:hover {
width: 600px;
height: 300px
}
变形
语法格式：
transform:none | transform-funcitons;
多个属性用空格隔开
2D变形
变形可以实现元素的位移、旋转、变形、缩放。
移动
translate(x,y); 水平方向和垂直方向同时移动
translateX(x); 水平方向移动
translateY(y); 垂直方向移动
居中效果
<style>
.wrapper {
margin: 0 auto;
border: 1px solid black;
width: 250px;
height: 250px;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* 移动自身的一半 */
}
</style>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
缩放
scale(x,y); 水平方向和垂直方向同时缩放
scaleX(x); 水平方向缩放
scaleY(y); 垂直方向缩放
取值范围：0.01-0.99，默认值为1
旋转
rotate(45deg);
变形
skew(30deg,0deg); 水平方向倾斜30度
<style>
.box {
width: 250px;
height: 170px;
border: 1px solid black;
background-color: red;
margin: 300px auto;
position: relative;
transform: skew(45deg, 0deg);
}
</style>
<body>
<div class="box"></div>
</body>
3D变形
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
CSS中3D坐标系
、
旋转
rotateX(180deg); x轴旋转
rotateY(180deg); y轴旋转
rotateZ(180deg); z轴旋转
<style>
img {
transition: all 0.5s ease 0s;
}
#img1:hover {
transform: rotateX(180deg);
}
#img2:hover {
transform: rotateY(180deg);
}
#img3:hover {
transform: rotateZ(180deg);
}
#img4:hover {
transform: rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0, 10deg);
}
</style>
透视
电脑屏幕是一个2D平面，可以通过透视呈现3D效果。
perspective属性设置在父元素，用于3D旋转的子元素。
移动
translateX(x); 水平方向移动
translateY(y); 垂直方向移动
translateZ(z); z轴方向移动，需要设置perspective属性
translate3d(x,y,z);
过渡变形案例
进度条
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.progress {
width: 50%;
height: 100%;
background-color: red;
transition: all .7s;
}
.bar:hover .progress {
width: 100%;
}
</style>
<body>
<div class="bar">
<div class="progress"></div>
</div>
</body>
旋转的图片
<style>
.box {
width: 250px;
height: 170px;
border: 1px solid black;
margin: 300px auto;
position: relative;
}
.box img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
.box:hover img:nth-child(1) {
transform: rotate(60deg);
}
.box:hover img:nth-child(2) {
transform: rotate(120deg);
}
.box:hover img:nth-child(3) {
transform: rotate(180deg);
}
.box:hover img:nth-child(4) {
transform: rotate(240deg);
}
.box:hover img:nth-child(5) {
transform: rotate(300deg);
}
.box:hover img:nth-child(6) {
transform: rotate(360deg);
}
</style>
<body>
<div class="box">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
</div>
</body>
开门效果
<style>
.box {
margin: 100px auto;
perspective: 1000px;
width: 450px;
height: 300px;
border: 1px solid black;
background: url("images/3.jpg") no-repeat;
position: relative;
}
.door-left,
.door-right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: brown;
transition: all 1s;
}
.door-left {
left: 0;
border-right: 1px solid black;
transform-origin: left;
}
.door-right {
border-left: 1px solid black;
right: 0;
transform-origin: right;
}
.door-left::before {
content: "";
position: absolute;
right: 5px;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid black;
border-radius: 50%;
transform: translateY(-50%);
}
.door-right::before {
content: "";
position: absolute;
left: 5px;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid black;
border-radius: 50%;
transform: translateY(-50%);
}
.box:hover .door-left {
transform: rotateY(-130deg);
}
.box:hover .door-right {
transform: rotateY(130deg);
}
</style>
<body>
<div class="box">
<div class="door-left"></div>
<div class="door-right"></div>
</div>
</body>
图片翻转
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden;
}
div:hover img{
transform: rotateY(180deg);
}
</style>
<body>
<div class="box">
<img src="images/qian.svg" alt="">
<img src="images/hou.svg" alt="">
</div>
</body>
动画
动画和过渡类似，不同点在于：过渡需要触发条件，动画则可以自动触发条件。
语法格式：
animation:动画名 动画时间 运动曲线 开始时间 播放次数 是否反方向;
| 属性 | 说明 |
|---|---|
| @keyframes | 规定动画 |
| animation | 简写 |
| animation-name | 动画名 |
| animation-duration | 花费时间 |
| animation-timing-function | 运动曲线 |
| animation-delay | 开始时间 |
| animation-iteration-count | 播放次数 inflinite 无限次数 |
| animation-play-state | 播放状态 running 默认值，动画执行 paused 动画暂停 |
| animation-fill-mode | 动画填充模式 none 默认值，动画执行完后回到原来位置 forwards 动画执行完后停止在结束位置 backwards 动画延迟等待时元素位于开始位置 both 结合forwards和backwards |
| animation-direction | 动画运动方向 normal 默认值，从from到to运动 reverse 从to到from运动 alternate 从from到头运动，重复执行是反向执行 |
<style>
@keyframes car {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(800px, 0, 0);
}
51% {
transform: translate3d(800px, 0, 0) rotateY(180deg);
}
100% {
transform: translate3d(0, 0, 0) rotateY(180deg);
}
}
img {
width: 100px;
animation: car 5s infinite;
}
</style>
<body>
<img src="images/car.jpg" alt="">
</body>
无缝滚动动画
<style>
@keyframes moving {
from {
transform: translateX(0);
}
to {
transform: translateX(-882px);
}
}
* {
margin: 0;
padding: 0;
}
.nav {
width: 882px;
height: 86px;
border: 1px solid black;
margin: 100px auto;
overflow: hidden;
}
.nav ul {
list-style: none;
width: 200%;
animation: moving 5s linear infinite;
}
.nav li {
float: left;
}
.nav:hover ul {
animation-play-state: paused;
}
</style>
<body>
<div class="nav">
<ul>
<li><img src="images/nav1.jpg" alt=""></li>
<li><img src="images/nav2.jpg" alt=""></li>
<li><img src="images/nav3.jpg" alt=""></li>
<li><img src="images/nav4.jpg" alt=""></li>
<li><img src="images/nav5.jpg" alt=""></li>
<li><img src="images/nav6.jpg" alt=""></li>
<li><img src="images/nav7.jpg" alt=""></li>
<li><img src="images/nav1.jpg" alt=""></li>
<li><img src="images/nav2.jpg" alt=""></li>
<li><img src="images/nav3.jpg" alt=""></li>
<li><img src="images/nav4.jpg" alt=""></li>
<li><img src="images/nav5.jpg" alt=""></li>
<li><img src="images/nav6.jpg" alt=""></li>
<li><img src="images/nav7.jpg" alt=""></li>
</ul>
</div>
</body>