Introduction to web Front-end to Actual Warfare: Implementation of CSS3 Animation

task

We recently updated our Track icon in SitGeek to match our new iPhone application. Chief Designer created heart icons with different states in PSD, and created animations below:

What is CSS3 animation?

In CSS, animation is an effect that allows elements to change their style gradually. You can use the @keyframes keyword to create an animation followed by the name of the animation.

@keyframes heartAnimation {
  /* Animation code goes here */
}

To make animation compatible across browsers, you need to use the vendor prefix:

@keyframes heartAnimation {
  /* IE 10+ */
}

@-webkit-keyframes heartAnimation {
  /* Safari 4+ */
}

@-moz-keyframes heartAnimation {
  /* Fx 5+ */
}

@-o-keyframes heartAnimation {
  /* Opera 12+ */
}
web front-end development learning Q-q-u-n: 767273102, sharing learning methods and small details, constantly updating the latest teaching and learning methods (detailed front-end project actual combat teaching video)

However, for the rest of this article, I will exclude vendor prefixes for space.

The next step is to add animation effects and determine when they occur. You can do this with a percentage of 0% to 100% or with the keywords "from" and "to", using simple animations of the start and end states. Here is an example of changing the background color from yellow to blue and then from yellow to green to blue.

@keyframes colorChange {
  from {background: yellow;}
  to {background: blue;}
}

@keyframes colorChange {
  0% {background: yellow;}
  50% {background: green;}
  100% {background: blue;}
}

After creating key frames, you can call animation CSS properties. For example, the following code will run the colorChange animation more than two times for 2 seconds:

.color-animation {
  animation-name: changeColor;
  animation-iteration-count: 2;
  animation-duration: 2s;
}

/* Shorthand */
.color-animation {
  animation: changeColor 2 2s;
}

Small partners who are interested in Web front-end technology can join our learning circle. They have been working for the sixth year. They can share some learning methods and details of practical development. 767-273-102 autumn skirt. How to learn the front-end from the zero foundation? Look at how our predecessors went ahead in the world of programming! Keep updating the latest teaching and learning methods (web front-end system learning route, detailed front-end project teaching videos), want to learn the front-end of the web, or transfer, or college students, as well as work to enhance their ability, small partners who are learning are welcome to join. We'll go with each other. Front end, front end, front end

Plan animation

After looking at gif several times, I realized that it was a slight shrinkage, then expanded to a slightly larger size than the original size, and then returned to the original size.

Heart click animation

Using the CSS3 keyframe and animation grammar above, here is the code I used to make animation in gif at the top of this page. It uses css transform and attributes to scale the image.

@keyframes heartAnimation {
  0% {transform: scale(1,1)}
  20% {transform: scale(0.9,0.9)}
  50% {transform: scale(1.15,1.15)}
  80% {transform: scale(1,1)}
}

.toggle-animation {
  animation: heartAnimation 0.7s; // no iteration count is needed as the default is 1 time
}

For images, I use fairies, so I also need to change the position of the image to get the red background:

.toggle-animation {
  background: url('../images/animation-example-sprite.png') no-repeat -320px 0;
  animation: heartAnimation 0.7s; // no iteration count is needed as the default is 1 times
}

Loading Animation

For a loading state, I whiten the heart and pulsate in-and-out indefinitely. It also shrinks and shrinks to the original size, rather than slightly larger than the original size before entering the original state, as the heartAnimation code above does. The following is the code for the loading state:

@keyframes loading {
  0% {transform: scale(1,1) }
  50% {transform: scale(0.8,0.8) }
  100% {transform: scale(1,1) }
}

/* Notice the added 'infinite' to is used to make the animation-iteration-count */

.toggle-loading {
  background: url('../images/animation-example-sprite.png') no-repeat -160px 0; // make background white
  animation: loading 1s infinite;
  -webkit-animation: loading 1s infinite;
  -moz-animation: loading 1s infinite;
  -o-animation: loading 1s infinite;
}

View the animation presentation

Here is the JS I used to animate when I clicked on each icon. JS added and deleted classes that I added animation attributes.

$(document).ready(function(){

  $('.animation-1 .image').on('click', function(){
    $(this).toggleClass('toggle-animation');
  });

  $('.animation-2 .image').on('click', function(){
    $(this).toggleClass('toggle-animation-slow');
  });

  $('.animation-3 .image').on('click', function(){
    $(this).toggleClass('toggle-loading');
  });
});
web Front-end development learning Q-q-u-n:  767273102 ´╝îShare learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)

Tags: css3 IE REST Programming

Posted on Wed, 18 Sep 2019 09:23:59 -0400 by PhotoClickr