CSS 06 动画
css3动画 @keyframes关键帧
.rect{
width:100px;
height:100px;
background-color:red;
position:flexde;
animation: mymove 2s infinite;} @keyframes mymove{ //方法一 首帧和尾帧
from{
top:0;
left:20%;
}
to{
top:0;
left:80%;
}}
@keyframes mymove{ //方法二 动画的不同阶段
0%{
top:0;
left:20%;
background-color:blue;
}
25%{
top:0;
left:80%;
background-colorr:green;
}
50%{
top:80%;
left:80%;
background-color:black;
}
75%{
top:80%;
left:20%;
background-color:yello;
}
100%{
top:0;
left:20%;
background-color:red;
}} css3动画animation符合属性 animation-name: 指定使用哪一个动画
animation-duration: 动画运行的时间
animation-timing-function: linear; 匀速
? ease ; 两头快，中间慢
? ease-in-out、ease-in、ease-out
animation-delay: 延迟
animation-iteration-count: 循环次数；infinite 无限循环
animation-direction: normal 默认；alternate 动画反方向播放
复合写：
animation：mymove 3s 3;
css3动画综合实例 CSS 06 动画插图
CSS 06 动画插图1
Loading动画效果实例(一)
.spinner{
margin:100px auto;
width:50px;
height:60px;
text-align:center;
font-size: 10px;} .spinner > div{
background-color:#67CF22;
height:100%;
width:6px;
display:inline-block;
animation: mymove 1.2 infinite ease-out} .spinner >div:nth-child(2){
animation-delay: -1.1s;} .spinner >div:nth-child(3){
animation-delay: -1.0s;} .spinner >div:nth-child(4){
animation-delay: -0.9s;} .spinner >div:nth-child(5){
animation-delay: -0.8s;}
@keyframes mymove{
0%,40%,100%{
transform:scaleY(0.4);
}
20%{
transform:scaleY(1)
}} Loading动画效果实例(二) CSS 06 动画插图2
CSS 06 动画插图3
.spinner{
width:60px;
height:60px;
position:relative;
margin:100px auto;}
.spinner > div{
width:100%;
height:100%;
background-color:#67CF22;
border-radius:50%;
opacity:0.6;
position:absolute;
top:0;
left:0;
animation:mya 2s infinite ease-out;}
.spinner > div:nth-child(2){
animation-delay:-1s; //尽量用负值，打开的时候不会出现卡顿}
@keyframes mya{
0%,100%{
transform:scale(0.0);
}
50%{
transform:scale(1.0);
}}
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023 年 01 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读