transtion--过渡动画
过渡动画可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是
:hover
,:active
或者通过JavaScript
实现的状态变化。
transition
CSS 属性是transition-property
,transition-duration
,transition-timing-function
和transition-delay
的一个简写属性,transition
只执行一次
- 写法
transtion: color 3s 6s ease;
transition-property
: 需要执行变化的属性transition-duration
:变化执行的时间,举个例子就是:从A开车到B所用时间transition-timing-function
:变化的方式,举个例子就是:从A开车到B的途中,车速是匀速还变速的transition-delay
: 实际中就是用来指定多个动画发生的顺序
/*二者同时变化后变化*/
transition: background-color 3s, color 3s 6s;
/*指定color在6s后变化*/
transition: background-color 3s, color 3s 6s;
animation--动画
animation
属性是animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state
属性的一个简写属性形式。
最重要的两个属性
animation-name
:动画的名称animation-duration
动画执行时间
div {
width: 100px;
height: 100px;
animation-name: full-color;
animation-duration: 3s;
}
@keyframes full-color {
0% {
background-color: red;
}
100% {
background-color: yellow;
}
}
@keyframes
是什么
类比于拍电影,把名字(
animation-name
)和需要拍多久(animation-duration
)定好,然后确定一些细节(其余属性,也可以没有),然后@keyframes
就是拍摄中的内容
余下几个属性
- 动画执行几次:
animation-iteration-count
(infinite无限) - 假如执行次数有限,最后是什么状态:
animation-fill-mode
,默认执行前的状态,forwards
最后一帧的状态
div {
width: 100px;
height: 100px;
animation-name: full-color;
animation-duration: 3s;
animation-iteration-count: 3;
animation-fill-mode: forwards;
}
@keyframes full-color {
0% {
background-color: red;
}
100% {
background-color: yellow;
}
}
- animation-timing-function: 参考
transition-timing-function
#anim {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: pink;
animation-name: active;
animation-duration: 520ms;
animation-iteration-count: infinite;
}
#anim:before {
content: "";
display: black;
position: absolute;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: pink;
}
#anim:after {
content: "";
display: black;
position: absolute;
top: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: pink;
}
@keyframes active{
0% {
transform: scale(1) rotate(45deg);
}
50% {
transform: scale(0.6) rotate(45deg);
}
}