<!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>
img {
height: 15px;
width: 15px;
}
img:hover {
height: 450px;
width: 450px;
}
/* img {
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
} */
/* 等同于 */
img {
/* transition: 1s height, 1s 1s width; */
/* transition: 1s height cubic-bezier(.83, .97, .05, 1.44); */
transition: 1s 1s height ease;
}
div {
width: 100px;
height: 100px;
}
/* div:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-direction: normal;(alternate、reverse、alternate-reverse)
animation-iteration-count: 3;
} */
/* animation-fill-mode还可以使用下列值
(1)none:默认值,回到动画没开始时的状态。
(2)backwards:让动画回到第一帧的状态。
(3)both: 根据animation-direction(见后)轮流应用forwards和backwards规则。 */
/* 等同于 */
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
@keyframes rainbow {
0% {
background: #c00;
}
50% {
background: orange;
}
100% {
background: yellowgreen;
}
}
</style>
</head>
<body>
<div></div>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi04.c.aliimg.com%2Fimg%2Fibank%2F2013%2F211%2F016%2F791610112_758613609.jpg&refer=http%3A%2F%2Fi04.c.aliimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633674283&t=cf512a2dedee2709f3c890d6df52983c"
alt="">
</body>
</html>
keyframes关键字用来定义动画的各个状态,它的写法相当自由。
@keyframes rainbow { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen } }
0%可以用from代表,100%可以用to代表,因此上面的代码等同于下面的形式。
@keyframes rainbow { from { background: #c00 } 50% { background: orange } to { background: yellowgreen } }
如果省略某个状态,浏览器会自动推算中间状态,所以下面都是合法的写法。
@keyframes rainbow { 50% { background: orange } to { background: yellowgreen } } @keyframes rainbow { to { background: yellowgreen } }
甚至,可以把多个状态写在一行。
@keyframes pound { from,to { transform: none; } 50% { transform: scale(1.2); } }
另外一点需要注意的是,浏览器从一个状态向另一个状态过渡,是平滑过渡。steps函数可以实现分步过渡。
div:hover { animation: 1s rainbow infinite steps(10); }
这里有一个非常神奇的例子,可以看到steps函数的用处。
animation-play-state
有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态。
上面动画中,如果鼠标移走,色块立刻回到动画开始状态。
如果想让动画保持突然终止时的状态,就要使用animation-play-state属性。
div { animation: spin 1s linear infinite; animation-play-state: paused; } div:hover { animation-play-state: running; }
上面的代码指定,没有鼠标没有悬停时,动画状态是暂停;一旦悬停,动画状态改为继续播放。效果如下。
目前,IE 10和Firefox(>= 16)支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀。
也就是说,实际运用中,代码必须写成下面的样子。
div:hover { -webkit-animation: 1s rainbow; animation: 1s rainbow; } @-webkit-keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }