css初步了解animation

2021-10-08 06:45:18 字數 948 閱讀 1898

檢索或設定物件所應用的動畫名稱,必須與規則@keyframes配合使用,因為動畫名稱由@keyframes定義。

@keyframes run

@-moz-keyframes run

@-webkit-keyframes run

在專案中需要注意相容性

div@keyframes run20%

100%

}<

/style>

這裡的動畫展示時間與設定動畫關鍵幀的百分數對應,50%即設定時間的一半所執行到的部分。

animation-duration、animation-timing-function和animation-delay在前面transition過渡中已經講過,這裡原理一樣,不做過多講述

檢索或設定物件動畫的迴圈次數,預設一次

infinite:無限迴圈

檢索或設定物件動畫在迴圈中是否反向運動,配合animation-iteration-count使用

normal:正常方向

reverse:反方向執行

alternate:動畫先正常執行再反方向執行,並持續交替執行(可用來渲染鐘擺運動)

alternate-reverse:動畫先反執行再正方向執行,並持續交替執行

檢索或設定物件動畫的狀態

running:運動

paused:暫停

檢索或設定物件動畫時間之外的狀態

none:預設值。不設定物件動畫之外的狀態

forwards:設定物件狀態為動畫結束時的狀態

backwards:設定物件狀態為動畫開始時的狀態

both:設定物件狀態為動畫結束或開始的狀態

初步了解css

css是 cascading style sheets 的首字母縮寫,意思是層疊樣式表。有了css,html中大部分表現樣式的標籤就廢棄不用了,html只負責文件的結構和內容,表現形式完全交給css,html文件變得更加簡潔。css的定義方法是 選擇器 選擇器是將樣式和頁面元素關聯起來的名稱,屬性是...

初步了解css

css的基本概念 我們看到的網頁都是有很漂亮的樣式的,而html僅僅只是做到了對網頁中的內容進行簡單修飾。那麼網頁的布局,主題風格等是怎麼被做出來的?css是什麼?層疊式樣式表cascading style sheet 目的 將html內容與html顯示的樣式相分離提出的一種解決方案。html 骨骼...

C Boost 初步了解

boost是由c 標準委員會成員發起 眾多c 業界高人參與設計並實現的乙個涉及面廣 質量高且業已廣泛使用的c 標準後備庫,其中 tr1已經被納入c 0x標準庫。不論從風格和內容組織上講,都可以認為boost專案是c 標準庫的延伸。截止到boost 1.43版本,boost專案擁有大約100個用途廣泛...