Css порядок выполнения анимации - PullRequest
Новая
       8

Css порядок выполнения анимации

1 голос
/ 10 марта 2019

Я новичок в коде и столкнулся с небольшой проблемой.

Я создал шахматную доску и хотел сделать анимацию с помощью шахматных фигур.

Моя проблема в том, что перваяанимация запуска первой части, затем вторая часть запускает свою анимацию, и моя проблема начинается здесь.После того, как вторая часть закончила свою анимацию, я хочу, чтобы эта же часть запустила новую анимацию.Но я не знаю, как это сделать.Я попытался добавить второй класс и создал новый ключевой кадр только с этим новым классом, но он не удался.

Надеюсь, кто-нибудь даст мне решение:) 

table
{
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width:thin;
    margin: auto;
    border-collapse: collapse;
    
   
    
    
}


td
{
    border-style: solid;
    width:20px;
    height: 20px;
}

.white
{
    background-color: antiquewhite;
}

.black
{
    background-color: grey;
    
}

img
{
    width:20px;
    height:20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    
}

h1
{
    text-align: center;
    font-family: Agency FB;
    font-size: 50px;
}

.l2 img
{
    filter:invert(100%);
}

.validation
{
    margin: auto;
    width: 1000px;
    height:500px
}

.move
{
  position: relative;
  animation-name: example;
  animation-fill-mode: forwards;
  animation-duration: 2.5s; 
}

@keyframes example {
  0%   {left:0px; top:0px;}
  100% { left:0px; top:65px;}
}


.move2
{
  position: relative;
  animation-name: example2;
  animation-duration: 2.5s;
  animation-fill-mode: forwards;
  animation-delay: 2.5s;
}

@keyframes example2 {
  0%   {left:0px; top:0px;}
  100% { left:0px; top:-65px;}
}
<!DOCTYPE html>
<html lang="fr">
	<head>
        <meta charset ="utf-8" >
        <title>Echequier Version CSS</title>
        <link rel="stylesheet" href="echequier.css">
	</head>
	<body>
        
        <h1>Exercice Echéquier Version CSS</h1>

		<table>
		    <tr>
                <td class="white l2"><img src="32459.png" alt="pion noir"></td>
                <td class="black l2"><img src="3839.png" alt="pion noir"></td>
                <td class="white l2"><img src="44903.png" alt="pion noir"></td>
                <td class="black l2"><img src="45124.png" alt="pion noir"></td>
                <td class="white l2"><img src="chess.png" alt="pion noir"></td>
                <td class="black l2"><img src="games-3355293_960_720.png" alt="pion noir"></td>
                <td class="white l2"><img src="32459.png" alt="pion noir"></td>
                <td class="black l2"><img src="32459.png" alt="pion noir"></td>
            </tr>
            
            <tr>
                <td class="black l2"><img src="32459.png" alt="pion noir"></td>
                <td class="white l2"><img src="3839.png" alt="pion noir"></td>
                <td class="black l2"><img src="44903.png" alt="pion noir"></td>
                <td class="white l2"><img src="45124.png" alt="pion noir"></td>
                <td class="black l2"><img src="chess.png" alt="pion noir"></td>
                <td class="white l2"><img src="games-3355293_960_720.png" alt="pion noir"></td>
                <td class="black l2"><img src="32459.png" alt="pion noir"></td>
                <td class="white l2"><img src="32459.png" alt="pion noir" class="move"></td>
                
            </tr>
            
            
            <tr>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                
            </tr>
            
            
            <tr>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
            </tr>
            
            <tr>
                 <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
            </tr>
            
            <tr>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
                <td class="black"></td>
                <td class="white"></td>
            </tr>
            
            <tr>
                <td class="white"><img src="32459.png" alt="pion blanc" class="move2"></td>
                <td class="black"><img src="3839.png" alt="pion blanc"></td>
                <td class="white"><img src="44903.png" alt="pion blanc"></td>
                <td class="black"><img src="45124.png" alt="pion blanc"></td>
                <td class="white"><img src="chess.png" alt="pion blanc"></td>
                <td class="black"><img src="games-3355293_960_720.png" alt="pion blanc"></td>
                <td class="white"><img src="32459.png" alt="pion blanc"></td>
                <td class="black"><img src="32459.png" alt="pion blanc"></td>
                
            </tr>
            
            <tr>
                <td class="black"><img src="32459.png" alt="pion blanc"></td>
                <td class="white"><img src="3839.png" alt="pion blanc"></td>
                <td class="black"><img src="44903.png" alt="pion blanc"></td>
                <td class="white"><img src="45124.png" alt="pion blanc"></td>
                <td class="black"><img src="chess.png" alt="pion blanc"></td>
                <td class="white"><img src="games-3355293_960_720.png" alt="pion blanc"></td>
                <td class="black"><img src="32459.png" alt="pion blanc"></td>
                <td class="white"><img src="32459.png" alt="pion blanc"></td>
                
            </tr>

		</table>

        
    <div>   
        <a href="exercice%20echequier%20feuille%202%20.html">Page de Validation</a>
       </div>  
	</body>
</html>

PS: я могу использовать только HTML и CSS.Я не могу использовать чужой язык.

1 Ответ

0 голосов
/ 10 марта 2019

Если вы хотите повторить анимацию: 

 .move2
{
  position: relative;
  animation:   example2 5s infinite;
}

Если вы хотите запустить вторую анимацию, когда первая заканчивается, вам следует изменить задержки анимации.Что-то вроде: 

 @keyframes example1 {
  0%   {left:0px; top:0px;}
  50% { left:0px; top:50px;} 
  100% { left:0px; top:50px;}
}


 @keyframes example2 {
      0%   {left:0px; top:0px;}
      50% { left:0px; top:0px;} 
      100% { left:0px; top:-50px;}
    }
...