SlideShare une entreprise Scribd logo
1  sur  7
CSS3 Animation
Ted
Why CSS3 Animation?
● Reduce javascript
● Easy to use
● Can use on any library
Show Time
● by jQuery
● by AngularJS
Effeckt.css
Demo
上面頁面都是利用 CSS3 的 Animations 與
Transitions 效果做出來的
How does it work?
主要是透過添加 class or data attribute 的方式,
Modernizer 就在其中做了整合各 browser 的
事情
1.jQuery
2.Modernizer
3.demo.js
smail demo
demo
Refer
Tedshd’s DevNote

Contenu connexe

En vedette

Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/SassJohan Ronsse
 
Designing Motion - FITC TO
Designing Motion - FITC TODesigning Motion - FITC TO
Designing Motion - FITC TOthisisportable
 
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...BookNet Canada
 
the rabbit and the tortoise
the rabbit and the tortoisethe rabbit and the tortoise
the rabbit and the tortoisethreepointone
 
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentLESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentKonstantin Kudryashov
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Rami Sayar
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheetschriseppstein
 
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)brianskold
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshopShaho Toofani
 
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignExperience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignCindy Chastain
 
Performance: Beyond Your Portfolio
Performance: Beyond Your PortfolioPerformance: Beyond Your Portfolio
Performance: Beyond Your PortfolioFITC
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementationdavejohnson
 
How to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilityHow to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilitySvetlin Denkov
 

En vedette (20)

Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/Sass
 
Workshop Advance CSS3 animation
Workshop Advance CSS3 animationWorkshop Advance CSS3 animation
Workshop Advance CSS3 animation
 
Designing Motion - FITC TO
Designing Motion - FITC TODesigning Motion - FITC TO
Designing Motion - FITC TO
 
CSS3 Animations
CSS3 AnimationsCSS3 Animations
CSS3 Animations
 
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
 
Sass: Introduction
Sass: IntroductionSass: Introduction
Sass: Introduction
 
the rabbit and the tortoise
the rabbit and the tortoisethe rabbit and the tortoise
the rabbit and the tortoise
 
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentLESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend development
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
 
Fastest css3 animations
Fastest css3 animations Fastest css3 animations
Fastest css3 animations
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
 
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignExperience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to Design
 
Performance: Beyond Your Portfolio
Performance: Beyond Your PortfolioPerformance: Beyond Your Portfolio
Performance: Beyond Your Portfolio
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 
How to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilityHow to Extend Axure's Animation Capability
How to Extend Axure's Animation Capability
 

Plus de Ted Hsu

Gulp.js & webpack
Gulp.js & webpackGulp.js & webpack
Gulp.js & webpackTed Hsu
 
Async 案例分享
Async 案例分享Async 案例分享
Async 案例分享Ted Hsu
 
Rwd design pattern
Rwd design patternRwd design pattern
Rwd design patternTed Hsu
 
Fed party 12_ted
Fed party 12_tedFed party 12_ted
Fed party 12_tedTed Hsu
 
Google json
Google jsonGoogle json
Google jsonTed Hsu
 
Angular js
Angular jsAngular js
Angular jsTed Hsu
 
Jav script xml-httprequest
Jav script   xml-httprequestJav script   xml-httprequest
Jav script xml-httprequestTed Hsu
 
Honey con 2014
Honey con 2014Honey con 2014
Honey con 2014Ted Hsu
 

Plus de Ted Hsu (13)

Gulp.js & webpack
Gulp.js & webpackGulp.js & webpack
Gulp.js & webpack
 
Async 案例分享
Async 案例分享Async 案例分享
Async 案例分享
 
Rwd design pattern
Rwd design patternRwd design pattern
Rwd design pattern
 
Rest
RestRest
Rest
 
Svg
SvgSvg
Svg
 
Fed party 12_ted
Fed party 12_tedFed party 12_ted
Fed party 12_ted
 
Google json
Google jsonGoogle json
Google json
 
Angular js
Angular jsAngular js
Angular js
 
Jav script xml-httprequest
Jav script   xml-httprequestJav script   xml-httprequest
Jav script xml-httprequest
 
Sublime
SublimeSublime
Sublime
 
Ide
IdeIde
Ide
 
Honey con 2014
Honey con 2014Honey con 2014
Honey con 2014
 
Vimrc
VimrcVimrc
Vimrc
 

Css3 animation