title: Testimonial section doesn't work on my website
body: <p>Could you please help me to solve this problem. I'm a beginner with CSS and I don't know how can I replace the @keyframes, to see the section on my website.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slideIndex = 0;
  showSlides();
  
  function showSlides() {
    var i;
    var slides = document.getElementsByClassName("bloc-caroussel");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i &lt; slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex &gt; slides.length) {
      slideIndex = 1
    }
    for (i = 0; i &lt; dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    setTimeout(showSlides, 8000); // Change image every 6 seconds
  
  }
  
  
  var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }
  
  function currentDiv(n) {
    showDivs(slideIndex = n);
  }
  
  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("bloc-caroussel");
    var dots = document.getElementsByClassName("dot");
    if (n &gt; x.length) {
      slideIndex = 1
    }
    if (n &lt; 1) {
      slideIndex = x.length
    }
    for (i = 0; i &lt; x.length; i++) {
      x[i].style.display = "none";
    }
    for (i = 0; i &lt; dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    x[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#temoignage {
    height: 550px;
    background-image: url(../images/slider-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
  
  #testim-title {
    text-transform: uppercase;
    font-size: 26pt;
    font-weight: bolder;
    color: white
  }
  
  .pic-caroussel {
    border-radius: 50%;
    margin: -30px 285px;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
  }
  
  .pic-caroussel:hover {
    transition: 0.70s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  
  .caroussel {
    border-color: transparent;
    border-radius: 10px;
    width: 690px;
    height: 370px;
    background-color: rgb(0, 0, 0, 0.54);
    position: relative;
  }
  
  blockquote {
    color: white;
    text-align: center;
    font-size: 14pt;
    font-weight: 600;
    padding-top: 60px;
    font-style: italic;
  }
  
  .name-testim {
    color: #fff;
    text-align: center;
  }
  
  .bloc-caroussel {
    margin: 0 38em;
  }
  
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 0s;
    animation-name: fade;
    animation-duration: 0s;
  }
  
  @-webkit-keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }
  
  @keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }
  
  
  /* The dots/bullets/indicators */
  
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 8px;
    background-color: #fff;
    border-radius: 50%;
    margin-top: 1em;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active {
    background-color: #717171;
  }
  
  .prev {
    border-bottom: 6px solid;
    border-left: 6px solid;
    transform: rotate(45deg);
    left: 38.9em;
  }
  
  .next {
    border-bottom: 6px solid;
    border-left: 6px solid;
    transform: rotate(-135deg);
    right: 38.5em;
  }
  
  .active {
    background-color: #2f4791;
  }
  
  .prev,
  .next {
    width: 20px;
    height: 20px;
    color: #2f4791;
    position: absolute;
    top: 254em;
    margin-top: -31px;
    cursor: pointer;
  }
  
  .prev:hover,
  .next:hover {
    color: rgba(255, 255, 255, 0.8);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id=temoignage&gt;
    &lt;h2 id="testim-title"&gt;Ils nous ont fait confiance&lt;/h2&gt;
    &lt;div class="bloc-caroussel fade"&gt;
      &lt;div class="caroussel"&gt;
        &lt;img class="pic-caroussel fade" src="./images/img100px100px/formaunivstrasdevfullseo-eleve1.jpg" alt="formaunivstrasdevfullseo élève 1"&gt;
        &lt;blockquote&gt;
          &lt;i class="fas fa-quote-left"&gt;&lt;/i&gt; Grâce à la &lt;strong&gt;formaunivstrasdevfullseo&lt;/strong&gt; , j'ai pu développer mon activité de webdesigner freelance, en fournissant à mes clients des services de qualité. Je la recommande ! &lt;i class="fas fa-quote-right"&gt;&lt;/i&gt;
        &lt;/blockquote&gt;
        &lt;h4 class="name-testim"&gt;Leïla Bektis&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bloc-caroussel fade"&gt;
      &lt;div class="caroussel"&gt;
        &lt;img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve2.jpg" alt="Elève 2 formaunivstrasdevfullseo"&gt;
        &lt;blockquote&gt;
          &lt;i class="fas fa-quote-left"&gt;&lt;/i&gt; Formateurs au top ! La &lt;strong&gt;formaunivstrasdevfullseo&lt;/strong&gt; m'a permis de réussir ma reconversion professionnelle, et de retrouver un travail dans un domaine qui me plait et me correspond. &lt;i class="fas fa-quote-right"&gt;&lt;/i&gt;
        &lt;/blockquote&gt;
        &lt;h4 class="name-testim"&gt;Jessie Okari&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bloc-caroussel fade"&gt;
      &lt;div class="caroussel"&gt;
        &lt;img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve3.jpg" alt="Elève 3 formaunivstrasdevfullseo"&gt;
        &lt;blockquote&gt;
          &lt;i class="fas fa-quote-left"&gt;&lt;/i&gt; Sans aucun doute le meilleur &lt;strong&gt;centre de formation à Strasbourg&lt;/strong&gt;. Je recommande vivement cette formation à quiconque souhaite réussir dans le domaine du développement web! &lt;i class="fas fa-quote-right"&gt;&lt;/i&gt;
        &lt;/blockquote&gt;
        &lt;h4 class="name-testim"&gt;Carine Lemarchand&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bloc-caroussel fade"&gt;
      &lt;div class="caroussel"&gt;
        &lt;img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve4.jpg" alt="Elève 4 formaunivstrasdevfullseo"&gt;
        &lt;blockquote&gt;
          &lt;i class="fas fa-quote-left"&gt;&lt;/i&gt; Je recommande vivement la formaunivstrasdevfullseo, avec des formateurs qui maîtrisent parfaitement les domaines du &lt;strong&gt;référencement seo&lt;/strong&gt; et du &lt;strong&gt;développement web&lt;/strong&gt;. &lt;i class="fas fa-quote-right"&gt;&lt;/i&gt;
        &lt;/blockquote&gt;
        &lt;h4 class="name-testim"&gt;Lee Won&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bloc-caroussel fade"&gt;
      &lt;div class="caroussel"&gt;
        &lt;img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve5.jpg" alt="Elève 5 formaunivstrasdevfullseo"&gt;
        &lt;blockquote&gt;&lt;i class="fas fa-quote-left"&gt;&lt;/i&gt; J'avais déjà effectué il y a quelques années une formation pour être graphiste, la formaunivstrasdevfullseo m'a permis de développer de nouvelles compétences. &lt;i class="fas fa-quote-right"&gt;&lt;/i&gt;
        &lt;/blockquote&gt;
        &lt;h4 class="name-testim"&gt;Kevin Cosn&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="prev" onclick="plusDivs(-1)"&gt;&lt;/div&gt;
    &lt;div class="next" onclick="plusDivs(1)"&gt;&lt;/div&gt;
    &lt;div style="text-align:center"&gt;
      &lt;span class="dot" onclick="currentDiv(1)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentDiv(2)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentDiv(3)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentDiv(4)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentDiv(5)"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is the screenshot of my testimonial section (local) <a href="https://i.stack.imgur.com/WXYlO.jpg" rel="nofollow noreferrer">enter image description here</a></p>