版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82724213
目录
animation
1.定义动画
@keyframes 动画名{
form{
规则1
}
to{
规则1
}
}
该可以用%开定义
2.配置动画
1）animation-name
动画名称
2）animation-duration
动画持续时间 s ms
3）animation-delay
延迟时间
4) animation-fill-mode
填充模式
forwards 动画结束后，元素状态为最后一帧
backwards 动画开始前，元素的状态为状态的第一帧
both 动画准备节点元素引用动画第一帧，动画结束后元素引用动画最后一帧
5)animation-direction
动画的执行顺序，是从0%-100%
normal
reverse
alternate
6)animation-timing-funciton
linear
ease
ease-in
ease-out
ease-in-out
7)animation-iteration-count
infinit
案例：小球随鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>圈动</title>
<link rel="stylesheet" href="css/common.css">
<style>
html,
body {
height: 100%;
}
body {
background-color: teal;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: absolute;
animation: x 1s both infinite alternate ease-in-out;
}
.wrapper>div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ffffff;
animation: y 1s both infinite linear;
}
.wrapper:nth-child(2) {
animation-delay: 0.1s;
}
.wrapper:nth-child(2)>div {
opacity: 0.8;
width: 40px;
height: 40px;
animation-delay: 0.1s;
}
.wrapper:nth-child(3) {
animation-delay: 0.2s;
}
.wrapper:nth-child(3)>div {
opacity: 0.5;
width: 30px;
height: 30px;
animation-delay: 0.2s;
}
@keyframes x {
0% {
transform: translate(-200px, 0);
}
100% {
transform: translate(200px, 0);
}
}
@keyframes y {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(0, 100px);
}
50% {
transform: translate(0, 0);
}
75% {
transform: translate(0, -100px);
}
100% {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
</body>
</html>transition
过渡
transition:属性 动画持续时间 延迟 时间曲线
transition-property
transition-duration
transition-delay
transition-timing-fiunction
可以直接加载在元素上，或者加载在伪元素上
.img{
transition:transform 1s;
}
img:hover{
transform:scale(1.1);
}
transform
变形函数 transform-origin 变形原点
1.rotate()
单位度数 deg
rotate ->roateZ
rotateX()-- 单杠
roateY()
2.scale()
参数为一个值，等比例缩放。参数为两个值，第一个表示x轴 第二个表示y轴缩放
3.skew()
skew()-- >skewX
4.translate()
translate()
tranlateX()
tranlateY()
案例:
实现鼠标放到图片上的放大，离开后缩小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图片缩放</title>
<link rel="stylesheet" href="css/common.css">
<style>
.product {
width: 358px;
height: 155px;
background-color: #ccc;
margin: 0 auto;
overflow: hidden;
}
.product>img {
transition: all 2s;
}
.product>img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box">
<div class="product">
<img src="1.4.jpg" alt="">
</div>
</div>
</body>
</html>