Animations with css

Question

Animations with css

Navigation

#1 by (2 votes)

1

Hello, I have a question regarding animations with css, I have a page made in HTML for an Internet system of Things, that when the user clicks on the drink the system sends a request to a server that in turn sends to an arduino, but beyond that I create a system that would put the icon of the drink spinning while the arduino "made the drink", but I do not know how to do?

PS: I have an icon in every icon that with jquery when clicked I can put and remove classes!

PS: The first image is turned because it was a test I was doing, but without success!

javascript css css3

asked by anonymous 24.06.2018 / 20:42

1 answer

How to upload image using ajax and PHP? How to return Primary key error already existing in PHP / MySQL?

score 2 · Accepted Answer

Create a class with animation linked to @keyframes that will rotate the element 360 degrees. When clicked, add the class to the element to activate the effect:

var wraps = document.querySelectorAll(".wrapper");
for(var x=0; x<wraps.length; x++){
   wraps[x].onclick = function(){
      this.classList.add("ativo");
   }
}

.wrapper{
   width: 50px;
   height: 50px;
   background-image: url(https://image.freepik.com/free-icon/gear_318-56262.jpg);
   background-size: cover;
   float: left;
}

.wrapper img{
   width: 100%;
   height: 100%;
}

.wrapper.ativo{
  animation: spin 1s infinite linear; /*velocidade de 1 segundo. Quanto maior, mais lento*/
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Clique nas imagens:
<br>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>