让我们回顾一下animation的知识点
animation 属性是一个简写属性,用于设置六个动画属性:
属性 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计时 |
animation-timing-functio | 规定动画的速度曲线 |
animation-delay | 规定在动画开始之前的延迟 |
animation-iteration-count | 规定动画应该播放的次数 |
animation-direction | 规定是否应该轮流反向播放动画 |
animation-timing-function规定动画的速度曲线
属性 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢cubic-bezier(0.25,0.1,0.25,1) |
ease-in | 动画以低速开始。cubic-bezier(0.42,0,1,1) |
ease-out | 动画以低速结束。cubic-bezier(0,0,0.58,1) |
ease-in-out | 动画以低速开始和结束。cubic-bezier(0.42,0,0.58,1) |
animation-direction规定是否应该轮流反向播放动画。
属性 | 描述 |
---|---|
normal | 默认值。动画每次循环都是向前(即按顺序)播放 |
alternate | 动画播放在第偶数次向前播放,第奇数次向反方向播放(animation-iteration-count取值大于1时设置有效) |
这里附上animation的案例:
在codepen上尝试:
https://codepen.io/neverloseyourway/pen/wVGQKG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
display: flex;
align-items: center;
justify-content: center;
}
.heart{
animation: beat 0.5s infinite alternate;
position: relative;
width:150px;
height: 150px;
background-color: red;
transform: rotate(45deg);
top:100px;
/*下面的动画分段也要都旋转45度*/
/*box-shadow: 0 0 5px 5px red;*/
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
}
.heart:before,.heart:after{
content: '';
border-radius: 50%;
position: absolute;
width: 150px;
height: 150px;
background-color: red;
}
/*主体被旋转时里面的圆也会旋转,相对位移的方向也被旋转了*/
.heart:before{
left: -75px;
}
.heart:after{
top:-75px;
}
@keyframes beat{
0%{
transform: scale(0.8,0.8) rotate(45deg);
}
50%{
transform: scale(1,1) rotate(45deg);
}
0%{
transform: scale(0.8,0.8) rotate(45deg);
}
}
</style>
</head>
<body>
<div class="heart">
</div>
</body>
</html>
到这里只是前情回顾,我们继续往下:
transition动画过渡
容易混淆的translate,transition,transform到底是什么关系?
CSS3中的transform(变形)属性用于内联元素和块级元素,它的属性值有以下五个:
- 旋转rotate
- 扭曲skew
- scale缩放
- 移动translate
- 矩阵变形matrix
可以看出:transform(变形)是CSS3中的元素的属性,而translate只是transform的一个属性值;
而我们要重点讲的transition动画过渡可以使用transfrom来完成的,增加过渡效果的多样性。
transtion属性
transition 属性是一个简写属性,用于设置四个过渡属性:
默认:all 0 ease 0
属性 | 描述 |
---|---|
transition-property | 规定设置过渡效果的 CSS 属性的名称 |
transition-duratio | 规定完成过渡效果需要多少秒或毫秒 |
transition-timing-function | 规定速度效果的速度曲线 |
transition-delay | 定义过渡效果何时开 |
触发方式:
伪类触发::hover : focus :checked :active
为了让你更好理解,请尝试以下代码:
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: slateblue;
border: aquamarine 3px solid;
transition:background-color 2s ease;
}
.box1:hover{
background-color: deepskyblue;
}
</style>
在codepen上尝试:
https://codepen.io/neverloseyourway/pen/YzzQOoE
可以看到,我们指定背景颜色这个属性发生过渡,持续时间为2s。使用hover触发的时候,将背景颜色的属性值重新赋值。
transition中使用transform,修改上面的一行代码
transition:background-color 2s ease,transform 2s ease-in 1s;
.box1{
width: 100px;
height: 100px;
background-color: slateblue;
border: aquamarine 3px solid;
/* transition:background-color 2s ease; */
transition:background-color 2s ease,transform 2s ease-in 1s;
}
.box1:hover{
transform: rotate(180deg) scale(.5,.5);
background-color: deepskyblue;
}
在codepen上尝试:
https://codepen.io/neverloseyourway/pen/vYYZVBd
animation和transition有什么区别?
相信看完这边文章,说起动画,你就会想起使用animation和transition这两个css属性来达到想要的动画效果。
区别:
CSS3 | 差异 |
---|---|
transition 特性1 | 在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画 |
transition 特性2 | 常用语鼠标事件(:hover、active、:focus、:click)或键盘输入时触发 |
transition 特性3 | 需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发 |
transition 特性4 | 只能定义开始状态和结束状态,不能定义中间状态 |
animation特性1 | 可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe)的参数 |
animation特性2 | 网页加载时会直接执行,可以自行控制各阶段动画的变化 |