CSS3中的动画效果

版权声明:本文为博主原创文章,欢迎查看个人主站:https://tangxiaolang101.github.io/ https://blog.csdn.net/tangxiaolang101/article/details/51450740

1、transition

示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
div{
background-color: #ffff00;
color: black;
transition:background-color 3s linear,color 2s linear,transform 1s linear;
}
div:hover{
transform: rotate(360deg);
background-color: aqua;
color: red;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

2、animation

与transition的区别是,transition只定义了起始和结束的状态,动画是这两个状态之间平滑过渡。animation可以指定多个关键帧的状态,从而可以实现更加复杂的动画效果。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
div{
background-color: #ffff00;
}
@keyframes mycolor{
0%{
background-color: #ffff00;
}
40%{
background-color: aqua;
}
70%{
background-color: darkblue;
}
100%{
background-color: #ffff00;
}
}
div:hover{
animation: mycolor 5s linear;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

3、实现动画的方式

(1)linear——匀速
(2)ease-in——慢快
(3)ease-out——快慢
(4)ease——慢快慢

阅读更多

没有更多推荐了,返回首页