CSS @keyframes动画效果

@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-

<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;
    }
}

CSS @keyframes动画效果

猜你喜欢