文章目录 一、动画1.1 基本使用1.2 @keyframes(关键帧) 定义动画1.3 初步使用1.4 绕圈 二、动画的常见属性2.1 解析 aniamtion-direction2.2 解析 animation-fill-mode2.3 解析 animation-timing-function2.4 打字机效果 三、动画简写属性 一、动画
动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡,动画可以实现更多变化,更多控制,连续自动插放等效果。
1.1 基本使用制作动画分为两步:
定义动画 @keyframes使用(调用) 1.2 @keyframes(关键帧) 定义动画 @keyframes animation{ 0%{ ... } 100%{ ... } } 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列在 @keyframes 中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100% 1.3 初步使用页面一打开,一个DIV将从左移至右。
@keyframes move { from { transform: translateX(0px); } to { transform: translateX(1400px); } } div { width: 100px; height: 100px; background-color: teal; /* 调用动画 */ animation-name: move; /* 持续时间 */ animation-duration: 3s; } 1.4 绕圈 @keyframes move { 0% { transform: translateX(0px); } 25% { transform: translateX(1000px); } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0px, 500px); } 100% { transform: translate(0px, 0px); } } div { width: 100px; height: 100px; background-color: teal; animation-name: move; animation-duration: 3s; }效果:
二、动画的常见属性动画是否逆向播放
aniamtion-direction: norma | reverse | alternate | alternate-reverse normal 默认的reverse 从终点运动向起点 终点=>起点 alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效 2.2 解析 animation-fill-mode动画结束后状态
aniamtion-fill-mode:forwards | backwards forwards 保持当前位置backwards 回到初始位置 2.3 解析 animation-timing-functionanimation-timing- function:规定动画的速度曲线,默认是 ease、
steps 理解为动画从头到尾,需要多少步来完成。
示例:
div { width: 0; height: 30px; background-color: teal; /* animation: move 4s linear forwards; */ /* steps 就是分几步来完成动画,有了 steps 不要写ease linear了 */ animation: move 4s steps(10) forwards; } @keyframes move { 0% {} 100% { width: 200px; } }效果: 以此推断做一个打字机效果。
2.4 打字机效果注意:1ch 等于一个 0 的宽度!宽度!宽度!
ch还有另一个规则:
1ch = 1个英文 = 1个数字2ch = 1个中文 <style> div { font-size: 46px; font-family: monospace; /* 1ch 代表0的宽度 */ width: 0ch; white-space: nowrap; /* animation: move 4s linear forwards; */ /* steps 就是分几步来完成动画,有了 steps 不要写ease linear了 */ animation: move 4s steps(9) forwards; overflow: hidden; } @keyframes move { 0% {} 100% { width: 18ch; } } </style> <div>我不知道你在想什么</div>效果:
三、动画简写属性animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状太;
示例: animation:move 1s ease 2s 3 alertnate fowwards
@keyframes move { from { transform: translate(0, 0); } to { transform: translate(1000px, 0); } } div { width: 100px; height: 100px; background-color: teal; /* 动画名称 */ /* animation-name: move; */ /* 持续时间 */ /* animation-duration: 2s; */ /* 速度曲线 */ /* animation-timing-function: ease-in; */ /* 何时开始:延迟一秒 */ /* animation-delay: 1s; */ /* 重复次数 */ /* animation-iteration-count: 2; */ /* 是否逆向播放 */ /* animation-direction: alternate-reverse; */ /* 结束后状态 */ /* animation-fill-mode: forwards; */ animation: move 2s linear 0s infinite alternate forwards; } /* 鼠标经过暂停动画 */ div:hover{ animation-play-state: paused; } 简写属性里面不包含 animation- play-state
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #超详细 #css动画animation #css3