[ CSS教學 ] CSS Animation 如何用CSS來製作動畫的效果? (上集)

標籤: , , , , ,

今天要來介紹 如何用 CSS 製作動畫的效果 ,CSS 中有一個 Animation 的屬性,他的概念和 Flash 的動畫影格差不多,可以設定某個影格的樣子也可以設定持續時間和淡入淡出等效果,只是他沒有一個使用者的介面轉而代之的是語法的描述來達到動畫的效果,那麼就讓我們來看看這個屬性要怎麼使用吧!

▲ 介紹內容
1. animation 可以製作什麼樣的效果 ?
2. 如何使用 animation ?
– transform 說明
– animation 使用方式
– animation 屬性介紹 (下集介紹)
3. 舉例和網頁資源參考(下集介紹)

▲ animation 可以製作什麼樣的效果 ?
CSS 動畫的效果
這個連結有些範例比較複雜有用到 before 和 after 的方式來撰寫 css ,單純給大家瞭解一下 CSS animation 可以做的事情有哪些~

▲ 如何使用 animation ?
animation 可以 旋轉 / 左右移動 / 淡入淡出 / 放大縮小等等的
要讓大家知道如何使用 animation 這個屬性
必須先介紹 transform
此屬性有以下使用方式

▲ transform 使用示範

    img{
        /*---左右移動---*/
        transform: translate(0,10px);/*y軸(垂直),往下移動10px*/
        transform: translateY(10px);/*與上方意思相同*/
        transform: translate(10px,0);/*x軸(水平),往右移動10px*/
        transform: translateX(10px);/*與上方意思相同*/
        /*---放大縮小---*/
        transform: scale(0);/*大小不變*/
        transform: scale(1.5);/*放大1.5倍*/
        transform: scale(0.8);/*縮小0.8倍*/
        /*---旋轉---*/
        transform: rotate(10deg);/*旋轉10度*/
        transform: rotate(360deg);/*旋轉360度,即是轉一圈的意思*/
        transform: rotate(180deg);/*旋轉180度,即是轉半圈的意思*/
    }

不是很了解? 試試看以下連結。
translateX
translateY
scale
補充:scale(vaule) 直接填入一個值是等比放大。

了解 transform 後我們就來學如何使用 animation!

▲ animation 使用示範
CSS

    

 

HTML

 
▲ 執行步驟
看個人習慣,但是這些東西一定要有。
第一步:創立HTML
第二步:設定HTML的CSS
第三步:創立影格 ( @keyframes )
第四步:宣告動畫

按照上方的語法就可以寫出一個從左淡入的效果囉!這周星期五再跟大家分享CSS動畫有什麼屬性,以及其他範例唷!
[ CSS教學 ] CSS Animation 如何用CSS來製作動畫的效果? (上集) 到此結束~請期待下集教學~



相關文章

CSS Animation 如何用CSS來製作動畫的效果? (下集)... 今天要繼續跟大家介紹如何使用 Animation 的屬性,沒有看過上集的你 請點我看上集 ,那麼有看過上集的人我今天就要繼續介紹囉! ▲ 介紹內容 1. animation 可以製作什麼樣的效...
滾動到此時執行動畫 Animate On Scroll   今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回...
JQuery 點擊後滑動到某個區塊(4/19新增語法說明與GoTop功能)... 今天要做的功能是 1. 點擊一元素後到達某個區塊 2. 點擊一元素後回到網頁最頂端 使用的語言是JQuery   簡述 這個功能類似快捷鍵可以運用在蠻多地...
One Page Scroll 判斷目前所在區塊(4/19更新說明)...   什麼是 One Page Scroll 呢? 概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用...