animation 屬性

微信小程序交流群：111733917 | 微信小程序從0基礎到就業的課程：https://edu.csdn.net/topic/huangjuhua

定義和用法

animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

? animation-name

? animation-duration

? animation-timing-function

? animation-delay

? animation-iteration-count

? animation-direction

注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。

默認值： none 0 ease 0 1 normal

繼承性： no

版本： CSS3

JavaScript 語法： object.style.animation=“mymove 5s infinite”

語法

animation: name duration timing-function delay iteration-count direction;

值 描述

animation-name 規定需要綁定到選擇器的 keyframe 名稱。。

animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。

animation-timing-function 規定動畫的速度曲線。

animation-delay 規定在動畫開始之前的延遲。

animation-iteration-count 規定動畫應該播放的次數。

animation-direction 規定是否應該輪流反向播放動畫。

小程序應用

Wxml代碼

animation 屬性是一個簡寫屬性，用于設置六個動畫屬性

01

Wxss代碼

.c01{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;

}

@keyframes myfirst

{

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

}

效果圖

總結

以上是生活随笔為你收集整理的微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。