HTML and CSS Reference
In-Depth Information
#images + p {
transition: 1s ease-in-out;
}
#images:hover + p {
margin-top: 100px;
}
When you hover over an image, it scales and rotates smoothly and the text glides down the page. moving the
mouse pointer away returns text and images to their normal positions.
Summary
CSS transforms and transitions break up the angular and static layout of web pages by moving, rotating, scaling,
and skewing elements, and creating a smooth transition from one state to another. In this chapter, I used the
:hover pseudo-class to trigger transitions, but you can also use JavaScript to add and remove a class to change
an element's properties. If you have defined a transition in a style that governs the element's normal state, the
browser will transition smoothly between the start and end values.
In the next chapter, we'll look at more complex animations using CSS keyframes.
 
 
Search WWH ::




Custom Search