CSS过渡和动画

最新推荐文章于 2024-04-05 07:18:53 发布

skyshinezy

最新推荐文章于 2024-04-05 07:18:53 发布

阅读量253

点赞数

文章标签： css

本文链接：https://blog.csdn.net/skyshinezy/article/details/117659939

版权

过渡（transition）

定义：指元素属性发生变化的方式

目的：提升用户体验，增强动画效果

属性

transition-property:指定需要添加过渡的属性
transition-duration：指定过渡效果要持续的时间
transition-timing-function：指定过渡效果的速度曲线
transition-delay：规定过渡效果的延迟（以秒计）

部分实例和讲解

transition-property:指定需要添加过渡的属性

当过渡需要指定多个属性时，属性间使用逗号隔开，如果所有舒心都需要过渡，可以使用all

大部分属性都支持过渡，凡是可以计算的属性都支持过渡（宽度、高度、字体大小、颜色、内边距、外边距）

transition-timing-function 指定过渡效果的速度曲线。

transition-timing-function 属性值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

<!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 {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s;
        }
        #div1 {transition-timing-function: linear;}
        #div2 {transition-timing-function: ease;}
        #div3 {transition-timing-function: ease-in;}
        #div4 {transition-timing-function: ease-out;}
        #div5 {transition-timing-function: ease-in-out;}
        div:hover {
            width: 300px;
        }
    </style>
</head>
<body>
    <p>请把鼠标悬停在下面的 div 元素上，可以查看div不同的速度曲线：</p>
    <div id="div1">linear</div><br>
    <div id="div2">ease</div><br>
    <div id="div3">ease-in</div><br>
    <div id="div4">ease-out</div><br>
    <div id="div5">ease-in-out</div><br>
</body>
</html>

transition-delay：规定过渡效果的延迟（以秒计）

div {
  transition-delay: 1s;
}

注意：1、CSS过渡属性可以使用简写的transition属性

2、简写属性时，前一个时间表示过渡执行时间，后一个时间表示过渡延迟时间

3、请始终设置transition-duration属性，否则时长为0，就不会产生过渡效果

动画（animation）

目的：方便网页实现动画效果。支持自动运行动画效果

属性

@keyframes：关键帧或者动画规则
animation-name：规定 @keyframes 动画的名称
animation-duration：定义需要多长时间才能完成动画
animation-delay：规定动画开始的延迟时间
animation-iteration-count：指定动画应运行的次数
animation-direction：指定是向前播放、向后播放还是交替播放动画
animation-timing-function：规定动画的速度曲线
animation-fill-mode：规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）

部分实例和讲解

@keyframes 与animation-duration

如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。

@keyframes animation {
   from {background-color: red;}
   to {background-color: yellow;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 4s;
}

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

from表示动画开始时的规则，可以使用0%
to表示动画结束时的规则，可以使用100%替代
可以使用百分比值

@keyframes animation {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 4s;
}

animation-delay：规定动画开始的延迟时间

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: animation;
  animation-duration: 4s;
  animation-delay: 2s;
}

animation-iteration-count：指定动画应运行的次数

"infinite" 使动画永远持续下去

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: animation;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

animation-direction：指定是向前播放、向后播放还是交替播放动画

animation-direction属性值：

normal：动画正常播放（向前）。默认值
reverse：动画以反方向播放（向后）
alternate：动画先向前播放，然后向后
alternate-reverse：动画先向后播放，然后向前

/* 以相反的方向（向后）运行动画 */
        div {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: red;
            animation-name: animation;
            animation-duration: 4s;
            animation-direction: reverse;
        }
/* "alternate" 使动画先向前运行，然后向后运行 */
        div {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: red;
            animation-name: animation;
            animation-duration: 4s;
            animation-iteration-count: 2;
            animation-direction: alternate;
        } 
/*  "alternate-reverse" 使动画先向后运行，然后向前运行 */
        div {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: red;
            animation-name: animation;
            animation-duration: 4s;
            animation-iteration-count: 2;
            animation-direction: alternate-reverse;
        }

animation-timing-function：规定动画的速度曲线

animation-timing-function属性值：
ease：指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear：规定从开始到结束的速度相同的动画
ease-in：规定慢速开始的动画
ease-out：规定慢速结束的动画
ease-in-out：指定开始和结束较慢的动画
cubic-bezier(n,n,n,n)：运行您在三次贝塞尔函数中定义自己的值

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

注意：实现动画效果，必须设定动画规则（关键帧）