CSS Transitions - How to make text fly in using Animation Keyframes
Are you ready to add animation to your web page? In this video we will be talking about CSS animations including transitions and keyframes. The demo will show you how to animate text to fly in from the top of the page and how to animate text flying in from the left side. Transition means you are going to change the state of an element from one stage to another. That might be you are changing something from blue to red or the width from 100 pixels wide to 300pixels wide - but in this demo we are changing the location of text from off screen to one the screen. Pause the video any time you need to in order to copy the code into your own project. Keyframes start at zero percent and you set the beginning state of the item. Keyframe end at 100% which is where you define the state of the element when you want the element to stop the animation. Video created by: #susanwinters214 Campsite Coders is an educational website that teaches students how to code for web development. Courses include HTML5, CSS and JavaScript. Learn to code at https://www.campsitecoders.com - SUBSCRIBE for more free content. NOTE: If you navigate to the CSS section of the website you will see that I added CSS code to make the 2 lines of text at the top of the page fly in. "Learn CSS 3" flies in from the top of the page and the tagline under it that says " Learn to code and become a Front End Web Developer." flies in from the left side of the page. This was done using the HTML and CSS code that is shown in this demo.
Are you ready to add animation to your web page? In this video we will be talking about CSS animations including transitions and keyframes. The demo will show you how to animate text to fly in from the top of the page and how to animate text flying in from the left side. Transition means you are going to change the state of an element from one stage to another. That might be you are changing something from blue to red or the width from 100 pixels wide to 300pixels wide - but in this demo we are changing the location of text from off screen to one the screen. Pause the video any time you need to in order to copy the code into your own project. Keyframes start at zero percent and you set the beginning state of the item. Keyframe end at 100% which is where you define the state of the element when you want the element to stop the animation. Video created by: #susanwinters214 Campsite Coders is an educational website that teaches students how to code for web development. Courses include HTML5, CSS and JavaScript. Learn to code at https://www.campsitecoders.com - SUBSCRIBE for more free content. NOTE: If you navigate to the CSS section of the website you will see that I added CSS code to make the 2 lines of text at the top of the page fly in. "Learn CSS 3" flies in from the top of the page and the tagline under it that says " Learn to code and become a Front End Web Developer." flies in from the left side of the page. This was done using the HTML and CSS code that is shown in this demo.