Why have a video just sit on a page when you can have it slide into place. In this exercise, learn how to use keyframes to move the video element from one side of the page to the other, apply easing, and a delay to start the motion after the page loads.
- In this final exercise…we're going to have some fun…with the video that you see here.…And actually have it slide…into its final position.…So, its going to start here…and end up somewhere over here.…This will be accomplished…through the use of…CSS Keyframe Animations.…Motion has become quite prevalent on the web and…because it is CSS based, there is no reason…why a video element can not…be put into motion.…Having said that, lets be really clear…about applying motion…to a video element.…
First off, just because you can do it…is no reason to do it.…In this example we're gonna have…the video slide into place…which is a great use case.…Having it bounce or rotate…a few times before coming to rest,…is nothing more than showing off.…And results in a really bad user experience.…With that proviso out…of the way, lets get started.…And to get yourself started…open the animate.html file found…in your chapter download.…Now I'm going to be using…Brackets as my code editor.…
So CSS3 requires two things…to put an element into motion.…The first is to establish the keyframes…
- Key video formats used to publish on the web
- Encoding video that's optimized for online delivery
- HTML5 native video embedding and interaction
- Styling video components with CSS
- Captioning video
- Preparing video for social media
- Using Dynamic Link
Skill Level Beginner
Design the Web: HTML Background Videowith Chris Converse28m 35s Beginner
Web Video: Develop Your Video Presencewith Rick Allen Lippert41m 54s Appropriate for all
Web Video: Makeup Techniqueswith Rick Allen Lippert25m 47s Appropriate for all
Exercise files1m 11s
1. Web Video Formats
2. Encoding Video
3. HTML5 and Video
4. Video and CSS
5. Playing with Video
Next steps1m 23s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.