Comment utiliser du CSS pur pour obtenir les effets de pause et de lecture de l'animation CSS ? Introduction à la propriété animation-play-state (explication détaillée)

Mettez en pause ou lisez des animations CSS en utilisant des méthodes CSS pures. Cela semble-t-il impossible à réaliser ? Ou même si cela peut être réalisé, il s'agit d'une méthode d'implémentation très fastidieuse qui nécessite beaucoup de styles CSS. En fait, ce n'est pas le cas. Dans l'animation CSS3, il existe une propriété permettant de mettre en pause et de lire des animations. Ce chapitre vous présentera comment utiliser du CSS pur pour obtenir les effets de pause et de lecture des animations CSS ? Introduction à la propriété animation-play-state (explication détaillée) . Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

attribut animation-play-state

 animation-play-state: paused | running;

animation-play-state : l'attribut définit si une animation est en cours d'exécution ou fait une pause. Vous pouvez l'interroger pour déterminer si l'animation est en cours d'exécution. De plus, sa valeur peut être définie pour mettre en pause et reprendre la relecture de l'animation.

Avec l'aide de Javascript, nous pouvons contrôler l'exécution et la lecture des animations CSS. Certains codes clés sont répertoriés ci-dessous :

code html :

<div class="btn">stop</div> 
<div class="animation"></div>

code css. :

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

code js :

document.querySelector('.btn').addEventListener('click', function() {
    let btn = document.querySelector('.btn');
    let elem = document.querySelector('.animation');
    let state = elem.style['animationPlayState'];
    
    if(state === 'paused') {
        elem.style['animationPlayState'] = 'running';
        btn.innerText = 'stop';
    } else {
        elem.style['animationPlayState'] = 'paused';
        btn.innerText = 'play';
    }
    
});

Rendu (pendant la lecture et après l'arrêt de la lecture) :

Implémentation CSS pure

Voyons si cela peut être réalisé en utilisant du CSS pur.

Implémentation de la pseudo-classe de survol

Utilisez la pseudo-classe de survol pour contrôler la pause du style d'animation lorsque la souris survole le bouton.

Les codes clés sont les suivants :

Code html :

<div class="btn stop">stop</div> 
<div class="animation"></div>

Code css :

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}

Rendu :

Bien sûr, cette méthode n'est pas assez intelligente. Si vous relâchez la liberté de la souris, cliquez une fois pour mettre en pause puis cliquez à nouveau pour jouer. Existe-t-il d'autres méthodes ?

implémentation vérifiée de la pseudo-classe

L'article précédent "Sujet CSS intéressant (8) : Solution de commutation d'onglets de barre de navigation CSS pure" est également As mentionné, en utilisant la pseudo-classe vérifiée de la balise radio, et en implémentant du CSS pur pour capturer les événements de clic.

Et vous pouvez contrôler certains styles CSS en utilisant l'élément cliqué. La mise en œuvre est la suivante :

code html :

<input id="stop" type="radio" name="playAnimation"/>
<input id="play" type="radio" name="playAnimation"/>

<div class="box">
    <label for="stop">
        <div class="btn">stop</div>
    </label>
    <label for="play">
        <div class="btn">play</div>
    </label>
</div>

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

code css :

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

#stop:checked ~ .animation {
    animation-play-state: paused;
}

#play:checked ~ .animation {
    animation-play-state: running;
}

Nous espérons que lorsque #stop et # jouer deux radios Lorsque vous cliquez dessus, attribuez animation-play-state: paused ou animation-play-state: running à l'élément .animation respectivement. Et un seul des deux peut prendre effet, les deux balises radio doivent donc recevoir le même attribut de nom.

Rendu :

Dans l'exemple ci-dessus, du CSS pur est utilisé pour mettre en pause et lire l'animation CSS.

Bien sûr, il existe d'autres méthodes, comme remplacer la radio par une case à cocher, ou utiliser le sélecteur de pseudo-classe :target pour obtenir le même effet que ci-dessus. Si vous êtes intéressé, vous pouvez l'essayer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!