Play CSS3 animation as you can imagine
林立秦
lichin-lin
NCTU 三年級
25sprout Front end 實習生
介紹一下
今天的重點...
想像
live coding!
與
想像
live coding!
與
你的
我的
嗚嗚
今天的分享可能不會
讓你完整學好一個css動畫
(還是其實在座都是大神...QQ)
但是希望你能
開始或持續
產出你的想像
故事是這樣的，有一天上班時...
加上2016今夏最熱門
結束後可以陪我去大安森林公園抓嗎?
一個簡單的動畫出現了
故事告一個段落，接著
使用工具-CodePen
Compile Everything,
Automatic Prefixing,
Browser Refresh...
使用語言說明
說完了，讓我們開始吧
我們先製作一顆樸素的按鈕
.btn
// button property
width auto
height auto
color white
font-size 2.5em
padding 20px 50px
cursor pointer
overflow hidden
position relative
// border~~
border-radius 5px
border 5px solid darken(main-blue, 20%)
transition all 0.75s ease1. Transition
2. Animation
3.Pseudo Elements
再來了解一些語法
1. Transition
a transition can be applied to any CSS property which has a discrete value which changes between the start and end states.
positional properties, layout properties, transform...
display:none
1. Transition
transition: [property] [duration] [timing-function][delay];
default: all 0s ease 0s
1. Transition
2. Animation-更豐富的操控
an animation can define a start and end state but it can also specify any number of intermediary state to create more sophisticated effects
intermediary state
2. Animation
附上一個 codepen example
@keyframes Animation {
0% {
}
70% {
}
100% {
}
}
一開始的狀態
中間再給予狀態
最後一個狀態
2. Animation
好像很難 但重點就是:
keyframes !
3.Pseudo!
繼續live coding~
文末，可以參考的資源
謝謝大家的聆聽
如果對於我所分享的有興趣
那今晚回家可以動動手指
看看這些資源。
也許，
很巧的他們就會派上用場了！
圖片來源
http://giphy.com/embed/jUwpNzg9IcyrK
https://github.com/pugjs/pug/issues/1882
https://commons.wikimedia.org/wiki/File:Stylus-logo.svg
http://simpsons.wikia.com/wiki/File:The_Devil_and_Homer_Simpson_18.JPG
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
http://rebloggy.com/post/my-gif-pokemon-gif-pokeball-ash-ketchum-professor-oak/23210337461