微信小程序的动画效果@keyframes
定义动画的格式:
@keyframes 动画名称{
阶段1{css样式}
阶段2{css样式}
阶段3{css样式}
}
每个阶段用百分比表示,即从0%到100%
起止必须设置即0%和100%,或者from和to
下列代码中的图片plane在屏幕中,呈W型运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img{
width: 150px;
-webkit-animation: plane 5s ease-in-out 1s;
-o-animation: plane 15s ease-in-out 1s;
animation: plane 5s ease-in-out 1s;
}
@keyframes plane { /*plane:动画名称*/
0%{