CSS3 Transitions Thought Library
Idea 1
Dynamic Header
I added transitions to the header to make it disappear when you scroll down the page, and reappear when you scroll up. In this example, a scroll event listener is added to the window. When the top of the page is scrolled 50px above the window, the top two sections of the header disappear, and the bottom of the header becomes fixed at the top of the window. A transition of .5 seconds is added to most of the changes to make them flow smoothly. However there is one change, on the width of the subhead and lower menu that do not have a transition, to make them happen instantly and go unnoticed.
Idea 2
Slideshow
Enjoy a slideshow of my son's mission photos. He is currently serving in Comayaguela, Honduras.
There are several transitions in the slideshow. There is a .5 second transition on hover for the arrows and the dots. The slide change is triggered by a click event, and there is a transition on the opacity and scale. Finally the text overlay has a transition with a .5 second delay so it changes after the other transitions have taken place.
Idea 3
Accordian Section
This accordian section uses transitions to change from a closed to an open state. When you click on each heading in the section, the height and color of a hidden div change to reveal the information about that heading. A 1-second transition with an ease-in timing function is applied so the change starts slowly and then speeds up. The arrow next to the heading rotates to indicate whether the div is open or closed. A 1 second transition is applied to the rotation.
Point 1 ▾
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Point 2 ▾
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Point 3 ▾
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Point 4 ▾
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Transitions are a great way to help your website look more professional and polished. They can help users better navigate your webpage by helping them understand what items are interactive, and where elements are moving to. Transitions make changes on the website less jarring and more pleasant. Transitions can be subtle or bold. Just be careful with using to many or too complicated transitions. They should aid the usability of the site, not hinder it.