What are CSS3 Animations?

  • An animation lets an element gradually change from one style to another.
  • You can change as many CSS properties you want, as many times you want.
  • To use CSS3 animation, you must first specify some @keyframes for the animation.
  • @Keyframes hold what styles the element will have at certain times.

The Building Blocks of Animations


CSS3 animations are made up of two basic building blocks.

  1. Keyframes - define the stages and styles of the animation.
  2. Animation Properties - assign the @keyframes to a specific CSS3 element and define how it is animated.
The @keyframes
  • Keyframes are the foundation of CSS animations.They define what the animation looks like at each stage of the animation timeline. 

Each @keyframes is composed of:

 1. Name of the animation:
A name that describes the animation, for example, bounceInRight.
   2. Stages of the animation:
Each stage of the animation is represented as a percentage. 0% represents the beginning state of the animation. 100% represents the ending state of the animation
   3. CSS Properties: 
 CSS properties defined for each stage of the animation timeline.

Animation Properties

Once the @keyframes are defined, the animation properties must be added in order for your animation to function
Animation properties do two things:

  • They assign the @keyframes to the elements that you want to animate.
  • They define how it is animated.

Comments

Post a Comment

Popular posts from this blog

What is an operator? An  operator  is an object that is capable of manipulating a value.  For example, in "1 + 2", the "1" and "2" are the operands and the plus symbol is the operator.  JavaScript supports the following types of operators.   Arithmetic Operators Comparision Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators
Read more
Use of page.php in WordPress. Display page title and page content. Display comment list and comment form (unless comments are off). Include  wp_link_pages()  to support navigation links within a page. Metadata such as tags, categories, date and author should not be displayed. Display an "Edit" link for logged-in users with edit permissions. Use of single.php in WordPress. Include  wp_link_pages()  to support navigation links within a post. Display post title and post content. Display the post date. Display the author name (if appropriate). Display post categories and post tags. Display an "Edit" link for logged-in users with edit permissions. Display comment list and comment form. Show navigation links to next and previous post using  previous_post_link()  and  next_post_link() . Use of function.php in WordPress. The functions file behaves like a  WordPress Plugin , adding features and functionality to a WordPress site....
Read more

Bootstrap Breakpoints

  // Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media ( min-width : 576px ) { ... } // Medium devices (tablets, 768px and up) @media ( min-width : 768px ) { ... } // Large devices (desktops, 992px and up) @media ( min-width : 992px ) { ... } // Extra large devices (large desktops, 1200px and up) @media ( min-width : 1200px ) { ... } // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up ( sm ) { ... } @include media-breakpoint-up ( md ) { ... } @include media-breakpoint-up ( lg ) { ... } @include media-breakpoint-up ( xl ) { ... } // Extra small devices (portrait phones, less than 576px) @media ( max-width : 575 .98px ) { ... } // Small devices (landscape phones, less than 768px) @media ( max-width : 767 .98px ) { ... }...
Read more