Keyframes not recognizing command

Question

Olas! I’m having trouble using this Rule because it doesn’t recognize the first line, so it doesn’t perform the animation. I don’t know what else to do, because even if I erase the line, the bottom line is no longer recognized. What I realized is that when you have an "{" bracket open and I put the first percentage and open another "{" bracket to define the effect, I close the "}" bracket and move to the second percentage for another effect, this first line is not recognized as a command, only the second. That is, it is not accepting two open brackets in the same Rule. {{ }}

Please, if anyone has ever been through this, I’d really appreciate the help. Thank you in advance.

PS.: The photo I kept so you can see the question of accepting the code by the color characteristics of the editors, which in this case is not as blue as it should be.

HTML CODE Slide Show

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

Slider Teste

<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;  
}  
}  

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

Answer 1

At the call of keyframe has to be determined the run time the structure should take to be completed and the period that can be up to infinity, where it gets looping, another thing to be observed is if the browser version supports the Rules.

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

Some prefixes:

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

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

Below is a sample 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>