transition和animation的区别

最新推荐文章于 2024-05-22 14:36:42 发布

万希&

最新推荐文章于 2024-05-22 14:36:42 发布

阅读量105

点赞数 1

分类专栏：前端文章标签：动画 css3 css

本文链接：https://blog.csdn.net/weixin_46015250/article/details/126397700

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

transition和animation的区别

transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

<!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>
 div:hover {
  width: 200px;
  height: 100px;
  transform:rotate(7deg);
  background-color: red;}
</style>


</head>
<body>
<div>Hello</div>
</html>

效果：
当鼠标移动到上面时，背景色为红色的长方形顺时针旋转七度

animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>coderwangxi</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        animation: mymove 5s infinite;
        /* //5秒内沿着轨迹匀速移动 */
      }

      @keyframes mymove {
        from {
          right: 200px;
          top: 100px;
        }
        to {
          right: 0px;
          top: 0;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>