#SIMPLE CSS ANIMATION CODE#

Last, the window animation changes the width and height of the entire document as the animation executes. Thirdly, during the header animation, the keyframe changes the height and width of the purple header in the document. Secondly, the article animation animates the white “piece of paper” inside the window by changing the position, width, and height. That is, it changes the absolute position of the button as the window resizes. First, the button keyframe animates the pink circle button by using the position property. The name of these keyframes is button, article, header, and window. To demonstrate, this example uses four different keyframe at-rules. The CSS Animation Responsive Material Design is a project on codepen.io that uses keyframe animations to animate a Google material-designed web page. To handle this complexity, the moon phase animation uses the transform translate, opacity property, and the background color to animate the cycle.ĬSS Animation Responsive Material Design CSS Animation Responsive Material DesignĪbout Project CSS Animation Responsive Material Design As a result, the moon cycle is very complex. This includes the Sun and many of the Moon’s phases. For example, these animation parts are the different phases of the moon cycle. Secondly, the moon phase is made up of several animation parts combined into one. As a result, at the end of the rotation, the animation comes to a complete loop. Firstly, the second-hand animation uses the CSS transform rotate property to rotate the arm of the second hand in a 360-degree rotation. To illustrate, this example animates two different parts of the watch, the second hand, and the moon phase. The Pure CSS Watch Keyframe Animation is a project on codepen.io which uses pure CSS Keyframe animations to create a working ticking watch. Pure CSS Watch Keyframe Animation Pure CSS Watch Keyframe AnimationĪbout Project Pure CSS Watch Keyframe Animation This is because, whenever the keyframe runs it uses a CSS transition translateY to move the island up and down on the Y-axis. That is, it involves moving the entire island up and down. Secondly, the other keyframe involves the entire island. As a result, the cloud puff fades out as it moves away from the smokestack. The cloud puff uses a keyframe that moves the clouds by transitioning the CSS opacity property to 0 and moves the cloud away from the smokestack by using the CSS transform translateX property. To demonstrate, the first effect is the smokestack cloud puff. For example, this factory uses two different animations to achieve the effect you see. The CSS Animation Floating Factory is a project on codepen.io which utilizes CSS keyframes to animate a factory island floating in the sky. CSS Animation Floating Factory CSS Animation Floating FactoryĪbout Project CSS Animation Floating Factory

#SIMPLE CSS ANIMATION CODE#

Feel free to use these keyframe examples and code in your web pages and projects. You can have as many frames as you want, manipulating objects on the web page, to produce the effect or effects you want to achieve.ĭown below you will find examples and code of cascading style sheets keyframe at-rules across the web and from codepen.io. To demonstrate, keyframes are like flipbooks, as the book starts flipping, the pages or aka frames, start producing moving parts. Nevertheless, a great example of a fun engaging animation is the iconic hamburger menu that when clicked usually opens a menu.īefore we jump into keyframe examples, we need to explain what they are. For instance, annoying keyframe animations will get your users to bounce more often.

However, this depends on the type of animation.

This has been tested and the results are more than 50% true across the entire web industry. Whenever keyframes are used, they cause the users to engage more often than a page without animations. Adding and using CSS keyframe animation can increase user engagement levels on the web.

Simple css animation