iT邦幫忙

DAY 9
0

Flash掰掰!? 不想放棄的囧MD系列 第 9

Css動畫Animation的介紹(一) - Flash(09)

上次有說到 CSS3 動畫的效果 trasform,

今天要介紹的是另外一個功能 Animation 的大略介紹,

Animation 之粗淺介紹

先說最重要的一件事情,IE9 之前的版本並不支援 Animation 這個功能唷~

是說,現在許多人已經開始在放生 IE9 了說....

Animation 主要是使用簡寫的屬性,在 css 中與 div 作用,

我們在製作動畫中,要先指定"秒數"以及動畫的"名稱",

當都設置完成後,則用 @keyframes 這個屬性來定義動畫的詳細內容~

先來寫個簡單的例子吧...

1.當滑鼠滑入 .div class="anima" 時,要讓該 div 經過2秒變化到 width:200px;

.anima
	width: 100px
	height: 100px
	background: #e03
	margin: 0 auto
	&:hover
		animation: fat 2s
		-webkit-animation: fat 2s

@keyframes fat
	0%
		width: 100px
	50%
		width: 150px
	100%
		width: 200px
@-webkit-keyframes fat
	0%
		width: 100px
	50%
		width: 150px
	100%
		width: 200px

目前有點小麻煩的是~

Animation 似乎不像是 transform一樣可以用 include的方式,

直接幫我們完成對應各種瀏覽器的css,

之後再陸續更新關於 animation 的部分。


上一篇
導引線 - Flash(08)
下一篇
Css動畫Animation的介紹(二) - Flash(10)
系列文
Flash掰掰!? 不想放棄的囧MD30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言