Keyframes is not recognizing the command

Question

Keyframes is not recognizing the command

Navigation

#1 by (2 votes)

0

Waves! I'm having trouble using this rule because it is not recognizing the first line, so it does not execute the animation. I do not know what to do anymore, because even if I delete the line, the bottom is no longer recognized. What I realized is when you have a bracket "{" open and I put the first percentage and I open another bracket "{" to set the effect, I close the bracket "}" and I move the second percentage to another effect, that first line is not recognized as a command, only the second. That is, it is not accepting two brackets opened in the same rule. {}}

Please, if someone has already gone through this, I would be very grateful for the help. Thank you in advance.

PS: The photo I kept to see the issue of accepting the code by the color characteristics of the editors, which in the case is not blue as it should.

HTML CODE Slide Show

<style>*{padding: 0; margin:0;}</style>

Slider Test

<section class="galeria">
    <img class="foto" src="imagem 1.jpg" />
    <img class="foto" src="imagem 2.jpg" />
    <img class="foto" src="imagem 3.jpg" />
</section>

CSS CODE  
section.galeria {  
margin: 200px auto;  
width: 480px;  
position: relative;  
overflow: hidden;  
}  
section.foto {  
position: absolute;  
opacity: 0;  
animation-name: animacao;  
}  
@keyframes animacao {  
25% {  
    opacity: 1;  
    transform: scale(1.1,1.1);  
}  
50% {  
    opacity: 0;  
}  
}

===================================================== ===========

html5 css3 notepad++

asked by anonymous 23.10.2017 / 04:21

1 answer

Hover with border and CSS image How do I put a list in disguise with RecyclerView in Android Studio

score 2 · Accepted Answer

In the call of keyframe it has to be determined the execution time the structure should take to be completed and the period that can be until infinity, where it is looped, another thing to be observed is if the version of browser supports the rules.

Example: some versions of browsers need a prefixo to work because they do not have natively functionality.

Some prefixes:

-webkit- for some versions of chrome, opera and safari.
-moz- for firefox.

To understand how the suffixes work and how to implement them, go to link

Below is a sample of the code working.

.div {
  width: 200px;
  height: 200px;
  background-color: blue;
  animation: animacao 5s infinite;
  border-radius: 10px;
}

@keyframes animacao {
  25% {
    opacity: 1;
    transform: 1.1, 1.1;
  }
  50% {
    opacity: 0;
    border-radius:45px;
  }
}

<div class="div"></div>