微信小程序使用CSS3——动画
Posted GuyoungStudio
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序使用CSS3——动画相关的知识，希望对你有一定的参考价值。
通过 CSS3，能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 javascript。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
.view1 {
width: 120px;
height: 120px;
margin: 20px;
background: red;
animation: animation1 5s;
}
@keyframes animation1 {
from {
background: red;
}
to {
background: yellow;
}
}
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
.view2 {
width: 120px;
height: 120px;
margin: 20px;
background: red;
animation: animation2 10s;
}
@keyframes animation2 {
0% {
background: red;
}
25% {
background: yellow;
}
50% {
background: blue;
}
100% {
background: green;
}
}
改变背景色和位置：
.view3 {
width: 120px;
height: 120px;
margin: 20px;
background: red;
position: relative;
animation: animation3 15s;
}
@keyframes animation3 {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
使用了简写的动画 animation 属性设置所有动画属性：
.view4 {
width: 120px;
height: 120px;
margin: 20px;
background: red;
position: relative;
/*
animation-name: animation4;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
*/
/* 是使用了简写的动画 animation 属性 */
animation: animation4 15s linear 2s infinite alternate;
}
@keyframes animation4 {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
参考资料
w3school 在线教程
CSS3 教程 | 菜鸟教程
其他
完整代码：https://github.com/guyoung/GyWxappCases/tree/master/CSS3
以上是关于微信小程序使用CSS3——动画的主要内容，如果未能解决你的问题，请参考以下文章