经验总结

  1. 首页 > 生活 > >

CSS动画-transition/animation

生活百科


CSS动画-transition/animation

文章插图
HTML系列：
  • 人人都懂的HTML基础知识-HTML教程(1)
  • HTML元素大全(1)
  • HTML元素大全(2)-表单
CSS系列：
  • CSS基础知识筑基
  • 常用CSS样式属性
  • CSS选择器大全48式
  • CSS布局秘籍(1)-任督二脉BFC/IFC
  • CSS布局秘籍(2)-6脉神剑
  • CSS动画-transition/animation
00、CSS动画CSS系列：
  • CSS基础知识筑基
  • 常用CSS样式属性
  • CSS选择器大全48式
  • CSS布局秘籍(1)-任督二脉BFC/IFC
  • CSS布局秘籍(2)-6脉神剑
  • CSS动画-transition/animation
CSS动画就是由一种状态（CSS样式），过渡到另一中状态（CSS样式）的动态过程，CSS中提供了两种动画实现方式：transition、animation 。
对比transition动画animation动画定义基于CSS属性变化的简单过渡动画基于关键帧@keyframes实现更复杂的动画复用只能执行一次，不可重复执行，复用不便可多次执行，复用方便执行方式页面加载不会默认执行，须触发执行可直接执行、可控制动画事件无，只能预估动画时间，用定时器setTimeout模拟支持监听事件，如动画开始、结束动画帧只有初始帧（当前样式）、结束帧（触发动画时的样式）支持任意多帧动画设置五星好评灵活简单功能丰富01、transition过渡动画1.1、transition动画transition 过渡动画是针对CSS样式的变化，进行过渡，如width、opacity、color改变的过渡，可以实现CSS样式的平滑动态过渡动画效果 。
transition 动画本身并不会主动执行，须通过其他方式触发，动画属性变化才会触发执行 。常用一些伪类触发：:hover、:focus、:active（鼠标按下激活）、:target（锚点元素id）、:checked，或者JS控制CSS样式来触发动画执行 。
transition过渡描述示例transition过渡动画的简写属性，包括下面这些小弟（transition /tr?n?z??(?)n/ 过渡）transition-property指定过渡动画的CSS属性名，多个,分割，默认all都生效transition-property: width;transition-duration动画时长，默认0，单位s、ms，*必备transition-duration: 1s;transition-delay动画延时时长，延时执行动画transition-delay: 1s;*-timing-function指定过渡动画执行缓动曲线函数，详见后面animation章节transition-timing-function: linear;
简写属性：transiton: property duration timing-function delay
当transition-property指定的属性值变化时，就会触发动画执行，且只对该属性执行过渡动画，设置all则任意属性变化都会触发动画执行 。
CSS动画-transition/animation

文章插图
如下示例分析：
  • 页面初始加载时并不会触发动画执行 。
  • 当鼠标移入时，属性width、background-color值变化，触发了动画执行 。
  • 当鼠移出时，属性width、background-color值回到初始状态，再次触发了动画执行 。
<div><button onclick="active()">动起来</button><p class="goodstudy">好好学习</p></div><style>.goodstudy {background-color: #63a9e7;width: 150px; margin: 40px 0; padding: 8px;/* 设置动画 页面加载并不会执行 */transition-property: width,background-color;transition-duration: 1s;transition-delay: 0.2s;transition-timing-function: ease-out;transition: all 1s ease-out;}.goodstudy:hover {width: 350px;background-color: red;}.active {transform: rotate(360deg);background-color: #0cdb39;transition: all 3s;}</style><script>//通过脚本添加CSS类，触发动画执行const pnode = document.querySelector('.goodstudy');function active() {pnode.classList.add('active');//执行完移除，没有事件只能定时执行移除动作setTimeout(() => {console.log('removed');pnode.classList.remove('active');}, 3000);}</script>

经验总结扩展阅读


上一篇：射手座的爱情保鲜期是多久如何延长爱情保鲜期

下一篇：未来最挣钱的十大行业排行榜 哪些工作薪资高