CSS之过渡和动画

已于 2022-08-12 11:31:37 修改
阅读量1.4k 收藏 2
点赞数 3
分类专栏： 摸鱼系列css 文章标签： css3
于 2022-04-30 12:21:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/demoren/article/details/123170312
版权

介绍

近期深入学习了css3的一些特性动画过渡3d等,过渡和动画在我们的手机应用和网站上都在大量的应用,有动画跟没动画的区别是很大的它增加体验舒适度和体验感,

一、过渡和动画属性

如果对过度和动画的属性还不了解可以看一下:

css过渡属性

css动画属性

vue过渡和动画

二、transition ， animation的区别

  • 区别：transition  只能声明元素变化从开始到结束之间的变化关系。而 animation 则是可以自由的定义一段动画在元素上的开始和结束。而且你能通过animation-iteration-count来设置动画的次数
  • transition: 强调是单一属性的动画效果,从开始到结束整个过程,中间不会发生动画的转折
  • animation：强调的是多种动画属性的结合，能够有效的排列动画执行时间的 某时做某事 从开始到结束的过程可以是简单，也可以是复杂。算是 transition 的加强版

三、常用动画

（运行示例）：


代码分享

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
@keyframes bounce {
  0%,
  100%,
  20%,
  53%,
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%,
  100%,
  20%,
  40%,
  60%,
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceInDown {
  0%,
  100%,
  60%,
  75%,
  90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  100% {
    transform: none;
  }
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 0;
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale3d(0.2, 0.2, 0.2) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    transform: scale3d(0.2, 0.2, 0.2) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

总结

进入工作后在公司项目一直都是以业务型快速上线项目很少有动画复杂的交互导致自己在过渡和动画 画布 3d等特性缺少了深入的理解跟创作,前端是可视化的工程所以能够做出一个炫酷好看的页面也是每个前端的目标,但是想要深入往往是最难的.学习需要沉淀

山海入梦
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS——过渡与动画
老司机的后备箱
12-30 3755
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
CSS3新增属性——过渡和动画（2D属性，3D动画）
m0_53619602的博客
06-07 2989
目录CSS3一、过渡1. 属性2. 花费时间3. 运动曲线4. 何时开始二、2D属性 2. translate（移动）2. rotate（旋转）3. scale（缩放）4. transform-origin（转换中心点）综合写法三、动画 1. 动画的使用1）.定义动画（keyframes）2） 元素使用动画 2. 动画序列3. 动画属性4. 动画属性简写四、3D动画 1. 三维坐标系 2. 3D移动 translate3d3. 透视 perspective 4. 3D旋转5. 3D呈现 （tran
浅谈CSS过渡、动画和变换
09-24
下面小编就为大家带来一篇浅谈CSS过渡、动画和变换。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
CSS3分享图标按钮过渡动画特效
07-28
CSS3分享图标按钮过渡动画特效是一款社会分享图标动画特效，鼠标移上去会有一个胶囊闪动的效果。
CSS 之 过渡动画（transition）
weixin_45092437的博客
04-25 2516
transition属性用来设置元素的过渡动画，是过渡属性的简写形式，属性值可以包含四部分transition-property、transition-duration、ransition-timing-function和transition-delay，分别表示过渡动画的CSS属性、过渡动画所需的时间、过渡动画执行的速度曲线和过渡动画执行前需要等待的时间。过渡相关事件：transitionrun、transitionstart、transitionend、transitioncancel。
CSS3之transform属性-3D转换
杨筱斌的博客
12-18 1786
三维坐标系 x 轴：水平向右 – 注意：x轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：z轴往外是正值，往里是负值   3D旋转左手准则 左手的手拇指指向旋转轴的正方向 其余手指的弯曲方向就是该元素沿着该旋转轴旋转的方向（正值方向）   transform: 作用：   &nbsp...
【CSS3系列】第七章 · 过渡和动画
麟-小白的博客
06-23 1622
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！【往期回顾】【CSS3系列】第六章 · 2D和3D变换【CSS3系列】第五章 · web 字体【CSS3系列】第四章 · CSS3新增渐变【CSS3系列】第三章 · CSS3新增边框和文本属性。
css 过渡和动画
hewindows的博客
11-19 186
过渡 1、什么是过渡 使得CSS的属性值在一段时间内平滑过渡 2、过渡的 4个要素(属性) 1、指定过渡属性 属性：transition-property 作用：规定应用过渡效果的CSS属性名称 取值： 1、none 2、all 3、property-name : 具体使用过渡效果的属性名称 可以设置过渡的属性： 1、颜色属性 2、取值为数值的属性 3、转换属性 transform 4、渐变属性 ...
CSS中的过渡与动画
爱前端的程序媛的博客
02-03 363
一些简单的动画效果，是可以用纯CSS做出来的。所谓动画，我认为就是交互嘛，让页面不是那么死板。 过渡就是让动画的效果不是那么的突兀，显得自然一些。 简单写一些过渡和动画的API。 过渡 transition-duration: 过渡的属性 transition-property:过渡的时间 transition-timing-function: 过渡的形式 （贝塞尔曲线 搜一...
CSS过渡魔法：平滑动画的秘诀
最新发布
07-24
6. **动画和过渡效果**：为元素添加动画效果和过渡效果，增强用户交互体验。 CSS通过选择器来指定样式应用到网页的哪些元素上。样式可以内联在HTML元素的`style`属性中，也可以在`<style>`标签内或外部的`.css`文件...
基于animate.css弹出框弹出关闭特效 （5星级）
01-20
基于animate.css弹出框弹出关闭特效 （5星级）：http://blog.csdn.net/libin_1/article/details/50450782
CSS 小结笔记之变形、过渡与动画的示例
09-22
主要介绍了CSS 小结笔记之变形、过渡与动画的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS实现悬停过渡动画三部曲
01-21
这个box元素内部是垂直和水平居中的文字内容。 HTML结构相当简单： <p>TEXT CSS代码也一样简单。我们想要使用无衬线字体，并确保div中的段落文本是白色的，可以通过如下代码来实现：   body { color: white; ...
jQuery+CSS3过渡动画模态窗口特效特效代码
03-20
这款"jQuery + CSS3 过渡动画模态窗口特效"是基于著名的Codrops库中的ModalWindowEffects组件实现的，它通过jQuery插件的方式，为开发者提供了丰富的模态窗口打开效果，使得网页的用户体验更加生动和吸引人。...
CSS3变换、过渡和动画
笺赕
07-25 1824
1、变换transform 能够对元素进行旋转（rotate）、缩放（scale）、倾斜（skew）、移动（translate）四种类型处理。 属性： transform                      向元素应用2D或3D变换 transform-origin            改变被变换元素的原点位置 transform-style              被嵌套元素...
CSS动画与过渡
weixin_53588068的博客
05-14 247
动画可以增强网页交互体验，减少代码量，让网页运行更快 C3动画的优势 1.不需要去掌握JS就可以写简单的动画 2.可以直接使用浏览器执行，通过改变属性控制动画，减少了js请求与内存的加载，减少代码量。 transition过渡动画 1.transition-property:要过渡的属性 2.transiton-duration:过渡的时间 3.transition-timing-function:过渡的速度 linear：匀速 ease：缓冲 ease-in：渐入缓冲 ease-out：渐
css3 keyframes zoom,CSS3通过@keyframes创建动画
weixin_30342363的博客
08-03 248
本文主要和大家介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。定义：通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，可以多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"...
css3 keyframes zoom,以直观的动画演示CSS3的keyframes是如何工作的
weixin_39942492的博客
08-03 125
CSS语言：CSSSCSS确定/* Animation property */.box {-webkit-animation: change-background 4s linear infinite alternate;animation: change-background 4s linear infinite alternate;}/* Keyframes */@-webkit-keyfra...
css中translate3d的使用
m0_59006402的博客
07-19 2426
tranform: translate3d(x,y,z) 这三个参数代表的含义: transform: translateX(100px) 仅在x轴上移动 transform: translateY(100px) 仅在y轴上移动 transform: translateZ(100px) 仅在z轴上移动 transform: translate3d(x,y,z) xyz分别代表要移动的轴的方向的距离 这个动画是从下往上的,代码如下: transform: ...
使用Vue和CSS实现过渡动画
05-26
Vue提供了过渡动画的内置支持，可以通过Vue的transition组件来实现过渡动画。在transition组件中，可以定义进入动画、离开动画和过渡模式等。同时，CSS也提供了丰富的动画效果，可以通过CSS的transition属性来实现过渡动画。 下面是一个使用Vue和CSS实现过渡动画的示例： ```html <template> <div> <button @click="show = !show">Toggle</button> <transition name="fade"> <p v-if="show">Hello, World!</p> </transition> </div> </template> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <script> export default { data() { return { show: false }; } }; </script> ``` 在上面的示例中，我们定义了一个按钮和一个包裹着文本的transition组件。文本的显示与隐藏通过控制show属性来实现。同时，我们也定义了一个名为"fade"的transition，它定义了进入和离开动画的方式。 在CSS中，我们定义了两个类名为"fade-enter-active"和"fade-leave-active"，它们分别表示进入和离开动画的状态。这里我们使用了CSS的transition属性，它指定了过渡的属性和时长。在这个例子中，我们使用opacity属性和0.5秒的时长来实现淡入淡出的效果。 同时，我们也定义了类名为"fade-enter"和"fade-leave-to"，它们分别表示进入和离开动画的初始和结束状态。在这个例子中，我们将opacity属性的值设置为0，表示文本初始时是透明的，离开时也是透明的。 通过这样的方式，我们就可以使用Vue和CSS来实现过渡动画了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值