css过度动画案例解析（transition和animation）

最新推荐文章于 2025-03-28 20:39:21 发布

mengxiang_go

最新推荐文章于 2025-03-28 20:39:21 发布

阅读量1k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/mengxiang_go/article/details/68490195

版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS实现正方形到圆形的过渡动画及正方体沿正方形边旋转的动画，详细解析transition与animation属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先把html放上（只放核心部分）

<div id="d1"></div>

例一，正方形变为圆形的过度动画-套路解析

1、设置变化前div的样式 = >=>=>

2、设置变化后div的样式

3、用transition来串联变化前和变化后

那我们先来看变化前css的属性设置：

#d1{
	width:200px;
	height:200px;
	background:blue;

2、再看变化后css的属性设置：

#d1:hover{
	    background:red;
	    border-radius:50%;
}

3、transition来串联变化前后

#d1{
	width:200px;
	height:200px;
	background:blue;

	/*定义过渡效果*/
	/*1、指定过渡属性*/
	transition-property:background,border-radius;
	/*2、指定过渡时间*/
	transition-duration:3s;
	/*3、指定过渡速度时间曲线函数*/
	transition-timing-function:linear;
	/*4、指定过渡延迟*/
	/*transition-delay:5s;*/
			}

transtion属性可以简写变化的元素名称 | 过度时间 | 过度的时间曲线函数 | 延迟时间

------------------------------华丽的分割线下方是animation动画的套路--------------------------------

案例二、正方体沿着正方形的边旋转一圈，图如下：

套路解析，

1、设置关键帧类似于AE软件做动画时的关键帧，由软件自动生成过度效果

2、设置完关键帧，就要设置animation属性，就完成了，属性内容跟transtion差不多

html部分是<div id="watch"></div>

第一部关键帧设置代码如下

@keyframes change{

//@keyframes是告诉浏览器引擎说，我们要制作一个名叫change动画了
    0%{

//百分之0是开始的样子，当然100%是结束的样子
      margin-left: 0px;
      margin-top: 0px;
      background-color: blue;
    }
    25%{
      margin-left: 100px;
      margin-top: 0px;
      background-color: red;
    }
    50%{
      margin-left: 100px;
      margin-top: 100px;
      background-color: blue;
    }
    75%{
      margin-left: 0px;
      margin-top: 100px;
      background-color: red;
    }
    100%{
      margin-left: 0px;
      margin-right: 0px;
      background-color: yellow;
    }

然后是animation部分属性的css代码：

   #watch{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    animation: change 1s linear  ;
    animation-fill-mode: forwards;
   }
    #watch:hover{
      animation-play-state: paused;
    }

上面可以看到基本上跟transiton是一样的，也可以说animation是transition的复杂版

需要说明的是annimation-fill-mode,意思是在结束动画时，所保持的状态，forwards表示结束时的样子是最后1帧的样子。

animation-play-state是指是否可以暂停动画，paused是指可以暂停。