- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 362字
- 2021-08-13 16:50:24
Transitions
We have a pretty good looking UI now, but we can make it even better with some transitions. CSS3 transitions add animation effects to elements when their styles change. For example, if we change the size of an element, it will gradually change from smaller size to a larger size thereby providing visual feedback to the user. When things change gradually, it catches our eye more than something that just appears suddenly on the page.
The CSS3 transition
property allows us to specify transitions on elements. It has the following format:
transition: property duration timing-function delay
Here is an explanation of the parameters:
property
: The CSS property to add a transition to. For example,width
orcolor
. Useall
to apply transitions to all the properties.duration
: The length of time the transition takes. For example,0.5s
takes half a second to complete the transition.timing-function
: Determines how the transition progresses over the duration:linear
: The same speed from beginning to endease
: Starts slow, then speeds up, then ends slowease-in
: Starts slow then speeds upease-out
: Starts fast then slows downease-in-out
: Eases in and then outcubic-bezier()
: If you don't like the predefined functions, you can build your own
delay
: The amount of time to wait before starting the transition.
The cubic-bezier
function takes four parameters which are numbers from 0
to 1
. The following produces the same effect as the ease
function:
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
Building your own cubic-bezier
functions isn't something most people can just do in their heads. If you want to explore creating your own timing functions, check out http://cubic-bezier.com/.
Like the gradients, transitions are widely supported, but you should still use browser-specific prefixes when declaring it:
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
The easiest way to apply a transition is in combination with a CSS hover
selector. The following will fade the background color of an element from white to blue in one quarter of a second when the user moves the mouse over it:
#some-element { background-color: White; transition: all 0.25s ease; } #some-element:hover { background-color: Blue; }
- DevOps:軟件架構師行動指南
- 大學計算機應用基礎實踐教程
- Visual FoxPro 程序設計
- Python機器學習實戰
- ADI DSP應用技術集錦
- 小程序開發原理與實戰
- 碼上行動:用ChatGPT學會Python編程
- Angular開發入門與實戰
- 利用Python進行數據分析
- OpenGL Data Visualization Cookbook
- Building Slack Bots
- 深入淺出 HTTPS:從原理到實戰
- Visual Basic語言程序設計上機指導與練習(第3版)
- Python High Performance(Second Edition)
- Learning PowerShell DSC(Second Edition)