前言

日常工作中可能遇到要求某一个在页面上的元素消失的，但是如果是单次的元素消失会显得页面效果过于生硬

今天我们做的就是更加友好的暂时元素消失的效果

这里要使用的是 css animation

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画

根据属性要求这里写一下动画

animation: slide-out-tr 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;

这里 slide-out-tr 就是要使用动画效果的选择器

0.5s 是完成动画的时间

cubic-bezier(0.550, 0.085, 0.680, 0.530) 是规定动画速度曲线

下面就是具体的动画写法，这里的动画效果是元素向上消失的效果，

需要写两个关键帧第一就是起始位置，

第二个就是消失之后的位置

我们这里是向上消失只需要设置y轴即可

@keyframes slide-out-top {
  0% {
       transform: translateY(0);

  }
  100% {
       transform: translateY(-1000px);
  }
}

起始位置y轴参数0，动画结束是y轴是-1000px

这里用一个卡通人物来看一下这个效果

可以看到这个效果被呈现出来，通过这个我们还能衍生出其他的效果

向右移动消失这次我们对x轴进行操作就可以

@keyframes slide-out-top {
  0% {
      transform: translateX(0);

  }
  100% {
        transform: translateX(1000px);
  }
}

同理向左移动消失，我们也是对x轴进行操作

@keyframes slide-out-top {
  0% {
      transform: translateX(0);

  }
  100% {
        transform: translateX(-1000px);
  }
}

向下移动消失，我们对y轴进行操作

@keyframes slide-out-top {
  0% {
     transform: translateY(0);

  }
  100% {
     transform: translateY(1000px);
}

那可不可向左上角方向消失呢？同时对x轴 y轴同时进行操作即可

@keyframes slide-out-top {
  0% {
     transform: translateY(0) translateX(0);

  }
  100% {
     transform: translateY(-1000px) translateX(-1000px);
}

右下角方向方向消失

@keyframes slide-out-top {
  0% {
     transform: translateY(0) translateX(0);

  }
  100% {
     transform: translateY(1000px) translateX(1000px);
}

“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！”

css 做出消失的动画效果

前言