关于transition和animation的区别

最新推荐文章于 2023-10-07 17:44:46 发布

chentiancccc

最新推荐文章于 2023-10-07 17:44:46 发布

阅读量4.3k

点赞数 2

本文链接：https://blog.csdn.net/cccct1/article/details/82743631

版权

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的用法的特点，支持多帧动画效果。

不足之处，请多多指教。

chentiancccc

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
关于transition和animation的区别

transition和animation都是可以做出动画效果的css3的元素，刚刚开始接触，觉得既然都是可以做动画效果不可能是没有区别的，一定有各自的独到用处。先来看看transition，transition是css3的过渡元素，它拥有以下属性，如下表：上表显示了过渡的全部属性，及其用法。好像也没有与今天的主题太搭上边，下面开始表演。...
复制链接

扫一扫