![CSS动画-transition/animation](http://img.zhejianglong.com/231019/1S44R961-0.png)
文章插图
HTML系列:
- 人人都懂的HTML基础知识-HTML教程(1)
- HTML元素大全(1)
- HTML元素大全(2)-表单
- CSS基础知识筑基
- 常用CSS样式属性
- CSS选择器大全48式
- CSS布局秘籍(1)-任督二脉BFC/IFC
- CSS布局秘籍(2)-6脉神剑
- CSS动画-transition/animation
- CSS基础知识筑基
- 常用CSS样式属性
- CSS选择器大全48式
- CSS布局秘籍(1)-任督二脉BFC/IFC
- CSS布局秘籍(2)-6脉神剑
- CSS动画-transition/animation
transition
、animation
。对比transition动画animation动画定义基于CSS属性变化的简单过渡动画基于关键帧
@keyframes
实现更复杂的动画复用只能执行一次,不可重复执行 , 复用不便可多次执行,复用方便执行方式页面加载不会默认执行 , 须触发执行可直接执行、可控制动画事件无,只能预估动画时间,用定时器setTimeout
模拟支持监听事件,如动画开始、结束动画帧只有初始?。ǖ鼻把剑⒔崾 。ùシ⒍钡难剑?/td>支持任意多帧动画设置五星好评灵活简单功能丰富01、transition过渡动画1.1、transition动画transition
过渡动画是针对CSS样式的变化 , 进行过渡,如width
、opacity
、color
改变的过渡,可以实现CSS样式的平滑动态过渡动画效果 。transition过渡描述示例transition过渡动画的简写属性,包括下面这些小弟(transition /tr?n?z??(?)n/ 过渡)transition-property指定过渡动画的CSS属性名,多个transition
动画本身并不会主动执行,须通过其他方式触发,动画属性变化才会触发执行 。常用一些伪类触发::hover
、:focus
、:active
(鼠标按下激活)、:target
(锚点元素id)、:checked
,或者JS控制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](https://m.360buyimg.com/jdcms/jfs/t1/205655/22/28353/29649/636b2addE31830851/db52e21172704647.gif)
文章插图
如下示例分析:
- 页面初始加载时并不会触发动画执行 。
- 当鼠标移入时,属性
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>
1.2、transform变换transform
可实现元素的各种图形变换,如缩放、旋转,及3D的变换,(transform/tr?ns?f??rm/变换) 。transform
本身并不是动画,不过常用来配合transition
来实现各种炫酷的变换动画效果 。transform变换函数描述示例transform元素变换,值支持下面这些函数,可设置多个值
推荐阅读
- 2 CSS布局秘籍-6脉神剑
- 1 CSS布局秘籍-任督二脉BFC/IFC
- 简易版 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码
- CSS选择器大全48式
- 常用CSS样式属性
- 现代 CSS 指南 -- at-rule 规则扫盲
- CSS基础知识筑基
- CSS 动画一站式指南
- 为什么CSS中的calc函数可能会不生效?
- day03-CSS