1、过渡

通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验
属性值

transition-property：指定要执行过渡的属性

多个属性间使用,隔开；
如果所有属性都需要过渡，则使用all关键字；
大部分属性都支持过渡效果；
注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；

transition-duration：指定过渡效果的持续时间

时间单位：s和ms（1s=1000ms）
transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

transition-timing-function：过渡的时序函数

linear匀速运动
ease 默认值，慢速开始，先加速后减速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier()来指定时序函数 https://cubic-bezier.com
steps()分步执行过渡效果，可以设置第二个值：
end，在时间结束时执行过渡（默认值）
start，在时间开始时执行过渡
transition：可以同时设置过渡相关的所有属性

只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间
示例

/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;

transition

几种过渡效果对比

linear匀速运动

ease 默认值，慢速开始，先加速后减速

ease-in 加速运动

ease-out 减速运动

ease-in-out 先加速后减速

cubic-bezier()来指定时序函数

steps()分步执行过渡效果

2、动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是

过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果

animation-name 指定动画的关键帧名称

animation-duration：指定动画效果的持续时间

animation-delay：动画效果的延迟，等待一段时间后在执行动画

animation-timing-function：动画的时序函数

animation-iteration-count 动画执行的次数

infinite 无限执行
animation-direction 指定动画运行的方向

normal 从from向to运行，每次都是这样，默认值
reverse 从to向from运行，每次都是这样
alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse 从to向from运行，重复执行动画时反向执行
animation-play-state 设置动画的执行状态

running 动画执行，默认值
paused 动画暂停
animation-fill-mode 动画的填充模式

none 动画执行完毕，元素回到原来位置，默认值
forwards 动画执行完毕，元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards和backwards

/* animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both; */

animation: test 2s 2s linear infinite alternate both;

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

行走的米兔的例子：

行走的米兔

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <style type="text/css">
     .box {
        height: 271px;
        width: 132px;
        background-image: url("./rabbit2.png");
        margin: 100px 100px;
        transition: background-position 3s steps(4);
        border:1px solid red;
        overflow:hidden;
    }

    .box:hover {
        background-position: -528px 0;
    }
 </style>

 <div class="box">
    
 </div>
 </body>
</html>

奔跑的少年的例子：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <style type="text/css">
      .box {
            height: 269px;
            width: calc(1500px/9);
            background-image: url("./bpsn.png");
            margin: 100px auto;
            animation: run 3s steps(9) infinite;

        }

        /* 关键帧 */
        @keyframes run {
            from {
                background-position: 0 0;
            }

            to {
                background-position: -1500px 0;
            }
        }
 </style>

    <div class="box">
        
    </div>
 </body>
</html>

css3 过渡与动画

1、过渡

2、动画

猜你喜欢