CSS(5) CSS3过渡变换和动画

最新推荐文章于 2025-07-04 13:33:33 发布

cuit_618

最新推荐文章于 2025-07-04 13:33:33 发布

阅读量935

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css3

本文链接：https://blog.youkuaiyun.com/zhaocuit/article/details/86697722

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文深入解析CSS中的过渡效果和动画技巧，涵盖过渡属性、时间函数、延迟、变换操作、三维变换、动画创建及应用，通过实例展示如何实现平滑过渡、元素变换及无缝动画效果。

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

1、过度
   添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态
1.transition-property:添加过渡效果的样式属性名称
transition-property: left;//

2.transition-duration:过渡效果的耗时以秒做为单位
transition-duration: 2s;//设置过度耗时为2秒

3.transition-timing-function:设置时间函数--控制运动的速度，属性值有点多，参考相关文档
transition-timing-function: linear;//均速过度，默认是ease（先快后慢）
   transition-timing-function: steps(5);//整个过度过程分为5步完成

4.transition-delay:过渡效果的延迟
transition-delay: 2s;//过度的延迟时间

   5.transition:为多个样式同时添加过渡效果
   transition: height 2s,width 2s linear 0s,background-color 5s linear 0s;

   注意：
       过渡效果只能产生从某个值到另外一个具体的值的过渡，比如不能加display:none过度到display:block;
一定要设置为哪些css样式添加过渡效果
       一定要设置过渡效果的耗时

   例子：想通过过度的效果实现鼠标移动到div上，div变大变色，鼠标离开div后，默认会自动还原
   <style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
/*为多个样式同时添加过渡效果*/
transition: height 2s linear 0s,width 2s linear 0s,background-color 5s linear 0s;
}
div:hover{
height: 400px;
width: 400px;
background-color: blue;
}
</style>
   <body>
   <div></div>
   </body>

2、二维变换
   transform

   1.移动：translate
       移动是参照元素的左上角
       执行完毕之后会恢复到原始状态，和过度一样
如果只有一个参数就代表x方向
如果有两个参数就代表x/y方向
如：transform: translate(100px,100px);//让某元素向x轴方向和y轴方向移动100px
       添加水平或者垂直方向的移动
transform:translateX(100px);//transform: translate(100px,0px);
transform:translateY(100px);//transform: translate(0px,100px);

   2.缩放：scale
       实现缩放，1指不缩放，>1.01放大 <0.99缩小
       默认参照元素的几何中心进行缩放或扩展
如果只有一个参数，就代表x和y方向都进行相等比例的缩放
如果有两个参数，就代表x/y方向
transform: scale(2);//x y 方向都扩大2倍
transform: scale(2,1);//x方向扩大2倍，y方向上不变
transform:scaleX(0.5);//缩放或扩展指定的方向
transform:scaleY(0.5);//缩放或扩展指定的方向

   3.旋转：rotate
       rotate(数值)。数值表示多少度，可正可负，正数为顺时针方向，负数为逆时针方向
       默认参照元素的几何中心进行旋转
       如：transform: rotate(-90deg)//逆时针

   4.斜切：skew
       skew(数值)。数值表示多少度，可正可负，正数为顺时针方向，负数为逆时针方向

   transform-origin:
       设置旋转或者缩放轴心
       可以用2个数字表示x和y坐标
可以使用2个关键字表示某个点：left top right bottom center
       transform-origin:100px 100px;//100,100坐标点
       transform-origin:left top;//左上角

3、设置任意元素居中：
       父元素绝对定位（也可是其他定位，只要是定位即可）
       子元素相对定位
       设置子元素的left和top值分别为50%。定位的百分比是参照父容器的宽高
使用transform实现元素的居中，transform: translate(-50%,-50%);，百分比是参照元素本身的宽高

       示例：
       <style>
           *{
               padding: 0;
               margin: 0;
           }
           .box{
               width: 400px;
               height: 400px;
               position: relative;
           }
           .rec{
               width: 200px;
               height: 200px;
               position: absolute;
               /*定位的百分比是参照父容器的宽高*/
               left: 50%;
               top: 50%;
               /*使用transform实现元素的居中百分比是参照元素本身的宽高*/
               transform: translate(-50%,-50%);
           }
       </style>
       <div class="box">
           <div class="rec"></div>
       </div>

4、三维变换
   transform

   1.移动：translate3d
       translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)
transform: translate3d(400px,0,0);//transform: translate3dX(400px);
transform: translate3d(0px,400px,0);//transform: translate3dY(400px);
transform: translate3d(0px,0px,400px);//transform: translate3dZ(400px);

   2.缩放：scale3d
       scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
大于1为放大，小于1为缩小

   3.旋转：rotate3d
       rotate3d(x,y,z,angle);
       x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值
       angle为一个角度

5、案例：实现一个正方体
   <style>
*{
padding: 0;
margin: 0;
}
.box{
   width: 200px;
   height: 200px;
   position: relative;
   margin: 100px auto;
   transform: rotate3d(1,1,0,-30deg);/*x y z 不能带单位*/
   /*让子元素保留3d变换之后的效果*/
   transform-style: preserve-3d;
}
.box>div{
   width: 200px;
   height: 200px;
   position: absolute;
   opacity: 0.4;/*设置透明度*/
}
.front{
   background-color: red;
   transform: translateZ(100px);
}
.back{
   background-color: purple;
   transform: translateZ(-100px) rotateY(180deg);
}
.left{
   background-color: green;
   transform: translateX(-100px) rotateY(-90deg);
}
.right{
   background-color: orange;
   transform: translateX(100px) rotateY(90deg);
}
.top{
   background-color: pink;
   transform: translateY(-100px) rotateX(90deg);
}
.button{
   background-color: blue;
   transform: translateY(100px) rotateX(-90deg);
}
</style>
   <div class="box">
       <div class="front">front</div>
       <div class="back">back</div>
       <div class="left">left</div>
       <div class="right">right</div>
       <div class="top">top</div>
       <div class="button">button</div>
   </div>

6、添加动画

   创建动画
   百分比是指整个动画耗时的百分比
@keyframes moveTest {
       0%{
transform: translate(0,0);
}
       50%{
transform: translate(0,500px);
}
       100%{
transform: translate(500px,500px);
}
   }
       上述定义假设动画耗时2秒，那么表示前一秒将元素向y轴正方向移动500px，后一秒将元素向x轴正方向移动500px
       0%可以写成from
       100%可以写成to
   @keyframes moveTest {
       from{
transform: translate(0,0);
}
       50%{
transform: translate(0,500px);
}
       to{
transform: translate(500px,500px);
}
   }

   添加动画效果
   1.animation-name:指定动画名称必填
       animation-name: moveTest;
2.animation-duration设置动画的总耗时必填
animation-duration: 2s;
3.animation-iteration-count设置动画的播放次数，
       默认为1次可以指定具体的数值，也可以指定infinite(无限次)
animation-iteration-count: 1;
4.animation-direction设置动画方向
       normal：正常方向
       reverse：反方向运行
       alternate：来回交替运行
       alternate-reverse：动画先反运行再正方向运行，来回交替运行
animation-direction: alternate;
5.animation-delay设置动画的延迟
animation-delay: 2s;
6.animation-fill-mode设置动画结束时的状态：
       默认情况下，动画执行完毕之后，会回到原始状态
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态
animation-fill-mode: both;
7.animation-timing-function动画的时间函数
animation-timing-function: linear;//和过度的时间函数类似
8.animation-play-state设置动画的播放状态
       paused:暂停
       running:播放
animation-play-state: running;

   9.简写animation:
       animation:动画名称动画耗时;

7、动画案例1 无缝滚动
   <style>
*{
padding: 0;
margin: 0;
}
div{
width: 882px;
height: 86px;
margin:100px auto;
background-color: #ddd;
overflow: hidden;
}
div >ul{
width: 200%;
list-style: none;
animation-name: move;/*1.设置的名称*/
animation-duration: 7s;/*2.设置动画的耗时*/
animation-iteration-count: infinite;/*3.市场无限循环*/
animation-timing-function: linear;/*4.设置时间函数*/
}
div > ul > li{
width:126px;
float: left;
}
div > ul > li　> img{
width:100%;
}
/*鼠标上移，停止动画*/
div:hover > ul{
cursor: pointer;
animation-play-state: paused;
}
/*创建动画*/
@keyframes move {
from{
transform:translateX(0);
}
to{
transform:translateX(-882px);
}
}
</style>
   <div>
       <ul>
           <li><img src="../images/1.jpg" alt=""></li>
           <li><img src="../images/2.jpg" alt=""></li>
           <li><img src="../images/3.jpg" alt=""></li>
           <li><img src="../images/4.jpg" alt=""></li>
           <li><img src="../images/5.jpg" alt=""></li>
           <li><img src="../images/6.jpg" alt=""></li>
           <li><img src="../images/7.jpg" alt=""></li>
           <li><img src="../images/1.jpg" alt=""></li>
           <li><img src="../images/2.jpg" alt=""></li>
           <li><img src="../images/3.jpg" alt=""></li>
           <li><img src="../images/4.jpg" alt=""></li>
           <li><img src="../images/5.jpg" alt=""></li>
           <li><img src="../images/6.jpg" alt=""></li>
           <li><img src="../images/7.jpg" alt=""></li>
       </ul>
   </div>