相比较过渡,动画可以实现更多变化、更多控制,连续自动播放等效果。
制作动画分为两步 :
a. 先定义动画
b. 在使用动画
a.用keyframes定义动画 (类似定义选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
动画序列 :
b.元素使用动画
CSS:
/* 页面一打开 一个盒子就从左边走到右边 */
/* 1.定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
/* margin: 100px auto; */
background-color: gold;
/* 2.调用动画 */
/* animation-name:动画名称; */
animation-name: move;
/* 持续时间 */
/* animation-duration: 持续时间; */
animation-duration: 2s;
}
HTML:
<div>
</div>
/* 动画名称 */
/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 2s; */
/* 运动曲线 */
/* linear(匀速) */
/* animation-timing-function: ease; */
/* 何时开始 */
/* animation-delay: 1s; */
/* 是否重复 EX:默认为1*/
/* animation-iteration-count: 1; */
/* 重复无限次 */
/* animation-iteration-count: infinite; */
/* 是否进行逆向播放 默认为normal*/
/* animation-direction: normal; */
/* 逆向播放 */
/* animation-direction: alternate; */
/* 规定动画结束的状态 默认为backwards 回到起始状态*/
/* animation-fill-mode: backwards; */
/* 停留在结束状态 forwards */
/* animation-fill-mode: forwards; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始 或者结束的状态;
animation:myfirst 5s linear 2s inginite alternate ;
CSS:
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 200px;
height: 100px;
background-color: sandybrown;
animation: move 2s linear 0s 1 alternate forwards;
}
/* 滑鼠经过停止动画 离开後继续 */
div:hover {
animation-play-state: paused;
}
</style>
HTML:
<div>
</div>
<<: 【23】Batch Normalization 使得 Regularizers 无效化?谈谈这两者的交互影响
>>: [NestJS 带你飞!] DAY22 - MongoDB
x86 在电脑市场的市占率高的原因 目前不论是笔记型电脑与桌上型电脑,大多是采用 x86 的 cpu...
这是我们内建的 suspend 函式第三篇,让我们看看有哪些吧: joinAll() 还记得 joi...
本节是以 Golang 上游 1a708bcf1d17171056a42ec1597ca8848c...
运算子主要是利用符号或单词,来运算前後的值并回传结果 范例: 我们到 Chrome 浏览器的 Con...
[Day20]Native Speech Recognition 需要用到的技巧与练习目标 Spee...