CSS @keyframes动画效果
程序员文章站
2022-05-02 20:34:15
...
@keyframes语法：
@keyframes animationname {keyframes-selector {css-styles;}}
其中animationname为动画的名称
keyframes-selector动画时常百分比，
合法的值：
- 0-100%
- from（与 0% 相同）
- to（与 100% 相同）
浏览器的支持：
谷歌浏览器：43.04.0 -webkit-
IE：10.0
火狐：16.05.0 -moz-
Safari：9.04.0 -webkit-
Opera：30.015.0 -webkit-12.0 -o-
h5
<body>
<div class="animation-piont">
<div class="piont circle-one"></div>
<div class="piont circle-two"></div>
<div class="piont circle-three"></div>
<div class="piont circle-four"></div>
</div>
</body>CSS
.animation-piont{
height: 1000px;
width: 1000px;
margin: 0 auto;
background-color:#DEA18F;
}
.circle-one{
width:50px;
height:50px;
background:#fff;
filter:alpha(opacity:10); opacity:0.1;
position:relative;
animation:one 5s infinite;
-webkit-animation:one 5s infinite;
border-radius:50%;
position: relative;
float: right;
right: 200px;
}
@keyframes one
{
from {top:20px;}
to {top:-25px;}
0% {
opacity: 0.1;
}
100% {
opacity: 0.03;
}
}
.circle-two{
width:25px;
height:25px;
background:#fff;
filter:alpha(opacity:10); opacity:0.1;
position:relative;
animation:two 5s infinite;
-webkit-animation:two 5s infinite; /* Safari and Chrome */
border-radius:50%;
position: relative;
float: right;
right: 200px;
}
@keyframes two
{
from {right:200px; top:10px;}
to {right: 240px; top:-10px;}
0% {
opacity: 0.1;
}
100% {
opacity: 0.03;
}
}
.circle-three{
width:50px;
height:50px;
background:#fff;
filter:alpha(opacity:10); opacity:0.1;
position:relative;
animation:three 5s infinite;
-webkit-animation:three 5s infinite; /* Safari and Chrome */
border-radius:50%;
position: relative;
float: right;
right: 350px;
}
@keyframes three
{
from {right:300px; top:10px;}
to {right: 280px; top:-45px;}
0% {
opacity: 0.1;
}
100% {
opacity: 0.03;
}
}
.circle-four{
width:50px;
height:50px;
background:red;
filter:alpha(opacity:100); opacity:1;
position:relative;
animation:four 10s infinite;
-webkit-animation:four 10s infinite; /* Safari and Chrome */
position: relative;
float: left;
top:100px;
}
@keyframes four
{
from {left:10px;}
to {left: 280px;}
0% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}