css的动画效果

学了好久的css，现在我们终于可以让页面动起来了，为的不就是那种页面能和自己互动的感觉吗，但我不会弄gif图，就用无聊的文字描述了，自己敲一下代码看看效果吧。

先看看没用动画效果的情况

<div class="out">
  <div class="in"></div>
</div>

.out{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
}
.in:hover{
   width: 50px;
   height: 50px;
   background-color: red;
}

transition

transition-duration

可以规定变化在多长时间内完成

.out{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transition-duration: 3s;
    /*变化时长为3秒*/
}
.in:hover{
   width: 50px;
   height: 50px;
   background-color: red;
}

transition-delay

规定动画延时的时间

.out{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transition-duration: 3s;
   transition-delay: 1s;
    /*延时一秒后开始变化*/
}
.in:hover{
   width: 50px;
   height: 50px;
   background-color: red;
}

transition-property

规定动画的属性

.out{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transition-property: background,with;
    /*背景颜色变化和宽度变化*/
   transition-duration: 3s;
}
.in:hover{
   width: 50px;
   height: 50px;
   background-color: red;
}

transition-timing-function

动画的速度变化

linear:匀速

ease：慢快慢

ease-in：开始慢

ease-out：结束慢

ease-in-out：结束和开始慢

cubic-bezier(x,x,x,x):自定义

.out{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transition-duration: 3s;
   transition-timing-function: easy-in-out;
}
.in:hover{
   width: 50px;
   height: 50px;
   background-color: red;
}

steps(几步,时间开始还是时间结束)：这是非线性的

step-start:开始变

step-end：结束变

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transition-duration: 1s;
   transition-timing-function: steps(2,end);
}
.in:hover{
   width: 100px;
   height: 100px;
   background-color: red;
}

transition简写

transition: property duration timing-function delay;

.out{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transition: background 2s  ease 1s,
               width 3s ease-in 2s,
               height 1s ease-out 1s;
    /*还可以连写*/
}
.in:hover{
   width: 50px;
   height: 50px;
   background-color: red;
}

animation

相当于transition的加强版，处理一些多变化的动画

基础的动画效果

.out{
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 50px;
   height: 50px;
   background-color: pink;
}
.out:hover .in{
   width: 50px;
   height: 50px;
   background-color: pink;
   animation-name: move;
    /*动画名称*/
   animation-duration: 4s;
    /*动画完成时间*/
}

@keyframes move {
    from {
        
    }
    /*move就是动画的名称*/
   25% {
      transform: translateX(150px)
   }
    /*时间到25%时，动画的效果*/
   50% {
      transform: translateY(150px) translateX(150px)
   }
   75% {
      transform: translateY(150px)
   }
    to {
        
    }
}
/*from和to不写就会回到原来的样式*/

animation-delay

动画延迟

.out{
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 50px;
   height: 50px;
   background-color: pink;
}
.out:hover .in{
   width: 50px;
   height: 50px;
   background-color: pink;
   animation-name: move;
   animation-duration: 4s;
   animation-delay: 1s;
    /*延时一秒*/
}

@keyframes move {
   25% {
      transform: translateX(150px)
   }
   50% {
      transform: translateY(150px) translateX(150px)
   }
   75% {
      transform: translateY(150px)
   }
}

animation-timing-function

和transition-timing-function的用法一样，本人懒不写了

animation-iteration-count

播放的次数，infinite表示一直播放

.out{
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 50px;
   height: 50px;
   background-color: pink;
}
.out:hover .in{
   width: 50px;
   height: 50px;
   background-color: pink;
   animation-name: move;
   animation-duration: 4s;
   animation-iteration-count:infinite;
    /*一直播放*/
}

@keyframes move {
   25% {
      transform: translateX(150px)
   }
   50% {
      transform: translateY(150px) translateX(150px)
   }
   75% {
      transform: translateY(150px)
   }
}

animation-direction

正放反放

reverse：反放

alternate：奇数正放，偶数反放

alternate-reverse：奇数反放，偶数正放

.out{
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 50px;
   height: 50px;
   background-color: pink;
}
.out:hover .in{
   width: 50px;
   height: 50px;
   background-color: pink;
   animation-name: move;
   animation-duration: 4s;
   animation-direction:reverse;
    /*反放*/
}

@keyframes move {
   25% {
      transform: translateX(150px)
   }
   50% {
      transform: translateY(150px) translateX(150px)
   }
   75% {
      transform: translateY(150px)
   }
}

animation-play-state

动画运行和停止：

paused：暂停

running：运行

.out{
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 50px;
   height: 50px;
   background-color: pink;
   animation-name: move;
   animation-duration: 4s;
   animation-iteration-count: infinite;
}
.out:hover .in{
   width: 50px;
   height: 50px;
   background-color: pink;
   animation-play-state: paused;
}

@keyframes move {
   25% {
      transform: translateX(150px)
   }
   50% {
      transform: translateY(150px) translateX(150px)
   }
   75% {
      transform: translateY(150px)
   }
}

animation-fill-mode

开始结束的状态

backwards ：直接从from开始，然后开始动画

forwards ：保持to的状态

both：有上面两个的特性

.out{
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 50px;
   height: 50px;
   background-color: pink;
}
.out:hover .in{
   width: 50px;
   height: 50px;
   background-color: pink;
   animation-name: move;
   animation-duration: 4s;
   animation-delay: 1s;
   animation-fill-mode: both;
}

@keyframes move {
   from {
      transform: scale(0.5);
   }
   25% {
      transform: translateX(150px)
   }
   50% {
      transform: translateY(150px) translateX(150px)
   }
   75% {
      transform: translateY(150px)
   }
   to{
      background: #000;
   }
}

简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state;