Question Arrêtez facilement l'animation d'images clés CSS


J'ai le code suivant: http://jsfiddle.net/odj8v0x4/.

function stopGlobe() {
    $('.mapfront').removeClass('mapfront-anim');
    $('.mapback').removeClass('mapback-anim');
}

function startGlobe() {
    $('.mapfront').addClass('mapfront-anim');
    $('.mapback').addClass('mapback-anim');
}
@keyframes mapfront_spin {
    0% {
        background-position: 1400px 0%;
    }
    100% {
        background-position: 0 0%;
    }
}
@keyframes mapback_spin {
    0% {
        background-position: 0 0%;
    }
    100% {
        background-position: 1400px 0%;
    }
}
@-webkit-keyframes mapfront_spin {
    0% {
        background-position: 1400px 0%;
    }
    100% {
        background-position: 0 0%;
    }
}
@-webkit-keyframes mapback_spin {
    0% {
        background-position: 0 0%;
    }
    100% {
        background-position: 1400px 0%;
    }
}
body {
    margin: 50px;
    background: #000;
}
.globe {
    width: 400px;
    height: 400px;
    position: relative;
}
.front {
    width: 400px;
    height: 400px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png);
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
}
.back {
    width: 400px;
    height: 400px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}
.mapfront, .mapback {
    border-radius: 300px;
    width: 340px;
    height: 340px;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 4;
}
.mapfront {
    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png) repeat-x;
}
.mapfront-anim {
    -webkit-animation: mapfront_spin 15s linear infinite;
    animation: mapfront_spin 15s linear infinite;
}
.mapback {
    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png) repeat-x;
    position: absolute;
}
.mapback-anim {
    -webkit-animation: mapback_spin 15s linear infinite;
    animation: mapback_spin 15s linear infinite;
}
<div class="globe">
    <div class="front"></div>
    <div class="mapfront mapfront-anim"></div>
    <div class="mapback mapback-anim"></div>
    <div class="back"></div>
</div>

Après avoir exécuté les fonctions javascript stopGlobe() l'animation s'arrête, mais s'arrête brusquement.

Puis-je arrêter l'animation en douceur, pour éviter les sauts soudains puis continuer l'animation à partir du point où elle s'est arrêtée?


14
2018-04-16 07:35


origine


Réponses:


Vous n'allez pas aimer cette réponse, mais la réalité est que les animations CSS3 ne sont pas vraiment utiles pour y parvenir. Pour que cela fonctionne, vous devez répliquer beaucoup de vos CSS dans votre Javascript, ce qui détruit le point (comme par exemple dans cette réponse étroitement liée). Changer la vitesse de l'animation CSS3?). Pour que ça s'arrête vraiment bien, votre meilleur pari serait d'écrire l'animation sur une plate-forme comme la Bibliothèque d'animation Greensock qui fournit tous les outils dont vous avez besoin pour l’arrêter en douceur au lieu de vous arrêter brusquement.


6
2018-04-16 07:51



Vous pouvez y parvenir en utilisant uniquement CSS.

Tout ce dont vous avez besoin est un petit mouvement pour le rendre lisse.

Donc, je mets en place une traduction en cas de besoin. Et cette transformation est facilitée par un effet de lissage.

Ainsi, en survolant, l'animation s'arrête (soudainement). Mais en même temps, un convertisseur de conversion est appliqué, et comme cette transformation est transférée avec l'assouplissement approprié, elle commence immédiatement avec la même vitesse que celle de l'animation.

Cette vitesse ralentira en fonction de l'assouplissement, jusqu'à ce qu'elle s'arrête.

J'ajoute un wrapper dans l'élément qui a le translation appliqué. Pour éviter que cette transformation "déplace" l'élément, nous devons rendre l'élément plus grand que l'espace visible, et définir à l'intérieur de l'encapsuleur qui limitera la partie visible (qui sera statique)

Survolez le globe. (regarde ma, pas de JS)

 @keyframes mapfront_spin {
    0% {        background-position: 1400px 0%;    }
    100% {        background-position: 0 0%;    }
}
@keyframes mapback_spin {
    0% {        background-position: 0 0%;    }
    100% {        background-position: 1400px 0%;    }
}
@-webkit-keyframes mapfront_spin {
    0% {        background-position: 1400px 0%;    }
    100% {        background-position: 0 0%;    }
}
@-webkit-keyframes mapback_spin {
    0% {        background-position: 0 0%;    }
    100% {        background-position: 1400px 0%;    }
}
body {
    margin: 50px;
    background: #000;
}
.globe {
    width: 400px;
    height: 400px;
    position: relative;
}
.front {
    width: 400px;
    height: 400px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png);
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
}
.back {
    width: 400px;
    height: 400px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}
.mapfront, .mapback {
    border-radius: 300px;
    width: 340px;
    height: 340px;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 4;
    overflow: hidden;
}
.mapfront-inner {
    width: 380px;
    height: 340px;
    top: 0px;
    left: 0px;
    position: absolute;
    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png) repeat-x;
    transition: transform 1s ease-out;
}
.mapfront-anim {
    -webkit-animation: mapfront_spin 15s linear infinite;
    animation: mapfront_spin 15s linear infinite;
}
.globe:hover .mapfront-anim,
.globe:hover .mapback-anim 
{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.globe:hover .mapfront-inner {
    transform: translateX(-40px);
}

.mapback-inner {
    width: 380px;
    height: 340px;
    top: 0px;
    left: -40px;
    background: url(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png) repeat-x;
    position: absolute;
    transition: transform 1s ease-out;
}
.globe:hover .mapback-inner {
    transform: translateX(40px);
}

.mapback-anim {
    -webkit-animation: mapback_spin 15s linear infinite;
    animation: mapback_spin 15s linear infinite;
}
<div class="globe">
    <div class="front"></div>
    <div class="mapfront">
        <div class="mapfront-inner mapfront-anim">
        </div>
    </div>
    <div class="mapback">
        <div class="mapback-inner  mapback-anim">
        </div>
    </div>
    <div class="back"></div>
</div>


12
2018-04-16 17:47



Utilisez javascript pour définir le CSS. Définissez animation-interation-count sur 1 (au lieu de l'infini) et définissez animation-timing-function pour le rendre plus facile.

Il devrait alors s'arrêter lentement sur sa propre.


1
2018-04-16 09:05



Vous ca. ajouter à toutes les images clés animation-play-state: en pause ;. ajouter la classe ci-dessus pour écraser la pause dans animation-play-state: running;

Il suffit de supprimer la classe avec javascript si vous souhaitez le mettre en pause


0
2017-09-25 15:46