Animation - Course Cascading Style Sheets (CSS/CSS3) - Part 19 | web Developer courses

Duration: 18:28 minutes

Summary: In this video, we will talk about another CSS3 feature, which is animation. Today, we will switch to Notepad++ to align our videos with the user’s feedback. We will create a new file and choose the language as HTML. Then, we create a new article section. We will add random content to it. In the style section, we define the elements that help us animate the article section. To do so, we take two steps. In the first step, we create a keyframe. In here we define the properties that need to be animated (like background and border radius). In the article id section (defined as #main in this case), we will add the animation part. Since we are testing I Firefox today, we will add the -moz prefix to end up with “-moz-animation”. Here we will refer to the keyframe name and the time to animate. We will also see how we can make it infinite and alternate. Finally, we will make the necessary changes to get this animation to work in Google Chrome.

Technologies and Resources: CSS3, HTML 5, Notepad++, article, width, border, -moz-animation, keyframes, background, box-shadow, border-radius.