css 做出消失的动画效果

您所在的位置：网站首页 › origin纵向移动线条就消失 › css 做出消失的动画效果

css 做出消失的动画效果

2024-03-11 10:47| 来源: 网络整理| 查看: 265

前言

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

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

这里要使用的是 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 做出消失的动画效果

css 做出消失的动画效果

今日新闻

推荐新闻