css3 animation
程序员文章站
2024-03-24 12:08:22
...
简单使用
@keyframes run {
0% {
left: 0;
top: 0;
}
25% {
left: 100px;
top: 0;
}
50% {
left: 100px;
top: 100px;
}
75% {
left: 0;
top: 100px;
}
100% {
left: 0;
top: 0;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation:run 4s;
}
参数解释
animation-name 定义的关键帧名
animation-duration 动画的总时间 动画执行完会返回到原有状态
animation-timing-function 定义的是动画每一段的运动状态
animation-delay 延迟
animation-iteration-count 执行几次，第二次开始没有延迟
animation-direction ： reverse 会倒着执行 alternate 先正着执行一次然后倒着执行（需要执行次数大于2）
animation-play-state running、paused 控制暂停 （少用，可能会有错误行为）
animation-fill-mode forwards 运动完后会保存最后一帧的状态 backwards 动画开始前就是第一帧的状态（delay） both 两者的结合（使用的比较多）
keyframes
0%可以写为from
100%可以写为to
其他的没有可替换的写法
兼容性问题：过渡版本的浏览器要加前缀名
demo演示
<style>
body {
background-color: #000;
}
@keyframes space-change {
from {
opacity: .3;
}
25% {
opacity: 1;
}
50% {
opcity: .3;
}
75% {
opacity: .1;
}
to {
opacity: .3;
}
}
@keyframes sunrise {
from {
opacity: 0;
}
10% {
opacity: 1;
transform: scale(.7, .7) translateX(0) translateY(0)
}
30% {
opacity: 1;
transform: scale(.5, .5) translateX(0) translateY(-500px)
}
50% {
opacity: 0;
transform: scale(.7, .7) translateX(400px) translateY(0)
}
to {
opacity: 0;
}
}
@keyframes moonrise {
from {
opacity: 0;
transform: translateY(0);
}
30% {
opacity: 0;
transform: translateY(0);
}
50% {
opacity: 0;
}
70% {
transform: translateY(-300px);
opacity: 1;
}
80% {
transform: translateY(-300px);
opacity: 1;
}
90%{
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 0;
}
}
.space {
height: 500px;
background-image: linear-gradient(to bottom, rgba(0, 130, 255, 1), rgba(255, 255, 255, 1));
animation: space-change 10s cubic-bezier(.5, 0, .5, 1) infinite;
}
.sun {
position: absolute;
left: calc(50% - 25px);
top: calc(50% - 25px);
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
transform: scale(.5, .5);
box-shadow: 0px 0px 50px 50px #fff,
0px 0px 100px 125px #ff0;
animation: sunrise 10s infinite;
}
.moon {
position: absolute;
left: calc(50% + 400px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 8px #fff, inset 0px 0px 8px #000;
animation: moonrise 10s cubic-bezier(0, 0, .5, .5) infinite;
}
.moon::after {
position: absolute;
content: "";
width: 90px;
height: 90px;
background-color: #000;
border-radius: 50%;
left: -10px;
top: -10px;
}
</style>
</head>
<body>
<div class="space"></div>
<div class="sun"></div>
<div class="moon"></div>
</body>
step animation
animation-timing-function的属性
steps(int,start\end)
每一段动画以多少步实现 第二个指定每一步的值发生变化的时间点
end （比较常用）
保留当前帧状态，直到这段动画时间结束
用forwards可看到最后一帧
start
保留下一帧状态，直到这段动画时间结束
不常用原因：忽略第一帧的效果 不好弥补
backwards需要有延迟时间
特殊值
steps(1,end)===step-end
steps(1,start)===step-start
step完成的三大例子
打字效果
<style>
@keyframes cursor{
0%{
border-left-color: rgba(0,0,0,0);
}
50%{
border-left-color: rgba(0,0,0,1);
}
100%{
border-left-color: rgba(0,0,0,0);
}
}
@keyframes cover{
0%{
left:0;
}
100%{
left:100%;
}
}
div{
position: relative;
display: inline-block;
height:100px;
font-size:80px;
line-height: 100px;
font-family: monospace;
}
div::after{
content:"";
position: absolute;
left:0;
top:10px;
height:90px;
width:100%;
background-color: #fff;
border-left:2px solid black;
box-sizing:border-box;
animation:cursor 1s steps(1, end) infinite, cover 12s steps(12, end);
}
</style>
</head>
<body>
<div>laoyutongsad</div>
</body>
钟表效果
<style>
@keyframes secondrun {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(540deg);
}
}
@keyframes minuterun {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(540deg);
}
}
div.clock {
position: relative;
width: 512px;
height: 512px;
background-image: url(./img/clock.png);
background-size: cover;
background-repeat: no-repeat;
}
div.second {
position: absolute;
left: 247px;
top: 180px;
width: 16px;
height: 278px;
background-image: url(./img/second.png);
background-size: cover;
background-repeat: no-repeat;
transform-origin: center 76px;
transform: rotate(180deg);
z-index: 3;
animation: secondrun 60s steps(60, end) infinite;
}
div.minute {
position: absolute;
transform-origin: center 16px;
left: 238px;
top: 240px;
width: 32px;
height: 218px;
background-image: url(./img/minute.png);
background-size: cover;
background-repeat: no-repeat;
transform: rotate(180deg);
z-index: 2;
animation: minuterun 3600s steps(60, end);
}
div.hour {
position: absolute;
transform-origin: center 16px;
left: 238px;
top: 240px;
width: 32px;
height: 148px;
background-image: url(./img/hour.png);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
</style>
</head>
<body>
<div class='clock'>
<div class="second"></div>
<div class="minute"></div>
<div class="hour"></div>
</div>
</body>
跑马效果`
<style>
.box{
width:200px;
height:100px;
overflow: hidden;
}
.pic{
width:2400px;
height:100px;
background-image: url('./img/horse.png');
animation:run 1s steps(12,end) infinite;
}
@keyframes run{
from{
transform: translate(0)
}
to{
transform:translate(-2400px)
}
}
</style>
</head>
<body>
<div class="box">
<div class="pic"></div>
</div>
</body>
上一篇： 栈的应用：括号应用