
Mar 07, 2014
Animations, defined by the keyframe rule, are one of the most exciting features of CSS3. It allows you to display various moving pictures to the user without Flash, JavaScript, or even images. This can be particularly helpful in situations where Flash may not be available, such as on iPhones. To create animations, the keyframe rule needs be applied in an element style definition using the 'from' and 'to' keywords to indicate where the animation starts and finishes. Note that these keyframe rules and animations are currently only available in Mozilla and WebKit based browsers. Once you've defined the animation, you can alter its properties with the CSS shorthand property codes. Some of these property codes include animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-play-state. However, one problem with animations is that by default, they snap back to their original position once the animation is finished. That's the opposite of what typically happens when creating an animation with jQuery or Flash-based tools such as Adobe Captivate. Since animations are often used to transition from one state to another, you'll likely want the final frame of the animation to stay put, just as you'd expect from these other tools. Fortunately, there's a way to make CSS3 keep the property setting at the end of the animation and not have the elements "snap back" to their original state. Simply use the animation-fill-mode property (and its -webkit- equivalent for Chrome and Safari browsers). By setting it to "forwards", you can cause the animation to freeze in its final position when it's finished:animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;One caveat is that it matters where you put this property. To ensure that it has an effect (in supporting browsers), place the property after you declare the animation's duration.
How do your Excel skills stack up?
Test NowNext up:
- Using custom fields to calculate GST in Microsoft Project
- Monetise your Windows Store Apps
- “Hey Rocky, watch me pull a rabbit out of my hat!” said Bullwinkle the trainer
- What's new in SQL Server 2014 Database Development
- Where did my Acrobat tab go in Microsoft Word?
- Enhancing the IF function with nested IF functions in Microsoft Excel
- What's new in SharePoint 2013 for developers
- Think Leader. Think Legacy. Think Auntie Marg.
- SQL Server 2014: In-Memory Database Capabilities
- How to create a PivotTable using Excel VBA
Previously
- Data Deduplication in Windows Server 2012: The Solution for Ennui!
- Leonardo, Steve and Basil
- Creating Building Blocks in Microsoft Outlook
- A Closer Look at Excel PowerPivot and Power View
- How to sort lists with multiple levels in Excel
- What Lies Beneath - Part 2
- No wonder my sales were down; I thought AIDA was an Italian Opera!
- Get-Help – the PowerShell Way
- Saving a file with a unique name in Excel VBA
- The new “share” feature in SharePoint 2013