CSS @keyframes動畫效果
阿新 • • 發佈:2019-01-03
@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; } }