transition和animation都是可以做出动画效果的css3的元素,刚刚开始接触,觉得既然都是可以做动画效果不可能是没有区别的,一定有各自的独到用处。
先来看看transition,transition是css3的过渡元素,它拥有以下属性,如下表:
上表显示了过渡的全部属性,及其用法。好像也没有与今天的主题太搭上边,下面开始表演。transition过渡属性有以下几个特性:
- 过渡属性只有当鼠标经过时候才会作用
- 过渡属性没有中间的过程,动画是一步到位
- 过渡属性一次鼠标经过只可以发生一次,不能重复发生动画
以上可以看的出来transition拥有自己的不足之处,animation就是为了补足过渡元素的不足的。但是同样transition过渡也是拥有自己的好处,它可以对一些动画起到润滑的作用,不至于让一些简单的动画看起来那么生硬,下面举个栗子:
来写一个按钮动画,相关代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态按钮用transition来过渡</title>
<style>
.button{
border:none;
background-color:red;
color:white;
padding:15px 20px;
font-size:15px;
cursor:pointer;
border-radius:5px;
width:150px;
}
.button span{
position: relative;
display: inline-block;
transition: .5s;
}
.button span::after{
content: "»";
opacity:0;
right:-20px;
position: absolute;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
transition: .5s;
}
</style>
</head>
<body>
<button class="button"><span>我是按钮</span></button>
</body>
</html>
这样可以很好的看出按钮的动画效果过渡的很自然,因为有transition这个过渡元素,所以对于简单的动画就有着其过渡的效果。
再来看看animation动画效果,先看下表:
上表显示的是animation的全部的元素属性,annimation有下面的 特点:
- 动画是一帧一帧的绘制的
- 可绘制复杂动画
- 需要配合@keyframes来使用
下面来举个栗子说明:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变色</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 3s;
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上面的代码展示了animation的用法的特点,支持多帧动画效果。
不足之处,请多多指教。