18 css transitions
-
Upload
rap-payne -
Category
Technology
-
view
1.025 -
download
0
description
Transcript of 18 css transitions
![Page 1: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/1.jpg)
CSS Transitions Adding motion to your pages for fun and profit
![Page 2: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/2.jpg)
Intro to transitions
� The transforms chapter showed us how to change HTML elements
� This chapter shows how to change them gradually
![Page 3: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/3.jpg)
If it transforms, it can transition.
![Page 4: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/4.jpg)
On the element you want to have animate, add the following CSS #id_of_element {! /* Chrome and Safari */! -webkit-transition: all 1s ease-in-out;!
/* Firefox */! -moz-transition: all 1s ease-in-out;!
/* Opera */! -o-transition: all 1s ease-in-out;! /* Internet Explorer */!
-ms-transition: all 1s ease-in-out;! /* Everything */! transition: all 1s ease-in-out;!
}!
![Page 5: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/5.jpg)
Demo: Simple transition Hands-on simple transition
![Page 6: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/6.jpg)
Transitions degrade gracefully
� If the browser doesn't support it, they still transform, but do it quickly
![Page 7: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/7.jpg)
Full syntax of transitions transition: <property> <duration> <timing-function> <delay>!
![Page 8: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/8.jpg)
The property is the thing you want transitioned
� background-color � height � width � top � left � rotation � … or … � all
![Page 9: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/9.jpg)
The duration is how long we should take to transition from the first state to the last
� In seconds or milliseconds � 5s � 5000ms
![Page 10: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/10.jpg)
The timing function tells how the transition accelerates over time
� cubic-bezier(a, b, c, d) � linear � ease � ease-in � ease-out � ease-in-out
![Page 11: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/11.jpg)
The transition delay tells how long to wait before beginning � Seconds or milliseconds
![Page 12: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/12.jpg)
Put them all together like so … !#theDiv {! width: 10px;! transition-property: width;! transition-duration: 2s;! transition-timing-function: ease-in-out;! transition-delay: 1s;!}!
… or … #theDiv {! width: 10px;! transition: width 2s ease-in-out 1s;!} !
![Page 13: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/13.jpg)
Just like with transforms, you need to prefix some of the transitions with the engine
-webkit-transition: all 0.5s ease-in-out; !-moz-transition: all 0.5s ease-in-out;!-ms-transition: all 0.5s ease-in-out;!transition: all 0.5s ease-in-out;!
![Page 14: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/14.jpg)
Demo: Basic transitions Hands-on basic transitions
![Page 15: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/15.jpg)
We can combine transitions
#theDiv { transition-property: top, left; transition-duration: 3s, 1s; transition-delay: 0s, 3s; }
![Page 16: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/16.jpg)
Demo: Combined transitions Hands-on combined transitions
![Page 17: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/17.jpg)
Conclusion
� The new transition features allow us to create smooth transforms
� We no longer need JavaScript or DHTML. It can all be done with CSS
� We can tune the duration, initial delay, and the easing function
� We can combine transitions to make it really look good
![Page 18: 18 css transitions](https://reader033.fdocuments.in/reader033/viewer/2022051314/54bfe70b4a795912408b456e/html5/thumbnails/18.jpg)
Further resources
� W3C Transition spec ◦ http://www.w3.org/TR/css3-transitions/#properties-
from-css
� Good transition tutorials ◦ http://www.w3schools.com/css3/
css3_transitions.asp ◦ http://css3.bradshawenterprises.com/transitions/