CSS - animation infinie (mouvement à gradient de chargement à droite) scintille

je suivais ce tutoriel ici: https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html CSS - animation infinie (mouvement à gradient de chargement à droite) scintille

pour créer un chargeur factice. Malheureusement ce tutoriel inclut des valeurs de pixels fixes et je veux que cela fonctionne sur des écrans de toutes tailles. donc j'ajusté l'animation comme ceci:

@keyframes placeHolderShimmer { 
 
    0% { 
 
    background-position: -30vw 0 
 
    } 
 
    100% { 
 
    background-position: 30vw 0 
 
    } 
 
} 
 

 
.c-animated-background { 
 
    animation-duration: 1.5s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: fff; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
    padding-top: 50px; 
 
    -webkit-backface-visibility: hidden 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body class="c-animated-background"> 
 
</body> 
 

 
</html>

Malheureusement sur la fin de l'animation après 1.5s, la zone grise saute vers l'avant ou en arrière, en fonction des valeurs de position de keyframe-fond que je jeu . Comment puis-je empêcher cela et rendre la transition fluide? aussi, l'animation semble être plus intense sur la performance que je ne le pensais - quand je veux inspecter l'élément de fond en mode dev en chrome avec mon macbook 2016 ', il pend pendant environ 15 secondes. devrais-je utiliser une transition/animation de transformation à la place?

Voici un plunker: https://plnkr.co/edit/X8PBIUYmAC11LCUV9uTy?p=preview

Source

2017-10-05 Phil

Idéalement vous utiliseriez '' 100vw' et -100vw'. Bump la vitesse jusqu'à '5s' et c'est la même vitesse que ce que vous avez maintenant. [Exemple] (http://jsbin.com/jemigixuco/edit?html,css,output) – misterManSam

Merci @monManSam, votre réponse fonctionne mieux, mais c'est si simple. parfait! – Phil

S'il vous plaît vérifier la réponse mise à jour espère, il est utile de vous. Actuellement je ne pense pas qu'il soit nécessaire de bouger le corps. Mais vous pouvez définir une division à l'intérieur et rendre absolu ce qui est relatif au corps.

VW ne fonctionne pas bien lorsqu'il est défini en valeur négative. S'il vous plaît vérifier la réponse mise à jour

@keyframes placeHolderShimmer { 
 
    0% { 
 
    background-position: 0px 0; 
 
    } 
 
    100% { 
 
    background-position: 100em 0; 
 
    } 
 
} 
 

 
.c-animated-background { 
 
    animation-duration: 3s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: fff; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    padding-top: 50px; 
 
    -webkit-backface-visibility: hidden; 
 
    left:0; 
 
    right:0; 
 
    top:0; 
 
    bottom:0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
<div class="c-animated-background"> 
 
</div> 
 
</body> 
 

 
</html>

Source

2017-10-05 06:12:39

Cela peut être ignoré et ne sera pas redimensionné. – misterManSam

Essayez ce morceau de code. Ce que j'ai fait est de convertir des valeurs d'images clés en paires de-à-parce que vous avez seulement 2 valeurs de seuil et il n'y a pas besoin d'utiliser des valeurs%.

Deuxièmement, j'ai donné la largeur & valeur de hauteur en fonction de la fenêtre d'affichage en utilisant les unités de fenêtre.

Si un commentaire d'issue ci-dessous.

@keyframes placeHolderShimmer { 
 
    from { 
 
    background-position: -468px 0 
 
    } 
 
    to { 
 
    background-position: 468px 0 
 
    } 
 
} 
 

 
.animated-background { 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: #f6f7f8; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    background-size: 800px 104px; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="animated-background"></div> 
 
</body> 
 

 
</html>

Source

2017-10-05 06:11:27

Cela peut être ignoré et ne pas être redimensionné. – misterManSam

Après 1,5 secondes, l'animation de Bégon 0. C'est pourquoi il est vacillante.

cela fonctionne dans jsFiddle:

0% { 
    background-position: -30vw 0 
} 
100% { 
    background-position: 70vw 0 
}

Voir JSFiddle pour le rendre plus clair. Cela dépend de la largeur de l'écran.

Goodluck,

Fabian # Web-Stars

Source

2017-10-05 06:15:31

Il n'y a pas de problème sur la durée. Ici vous avez commencé avec -30vh donc finissez-le avec 70vh (100-30) aussi simple que pour une transition en douceur. Consultez l'extrait ci-dessous pour référence.

@keyframes placeHolderShimmer { 
 
    0% { 
 
    background-position: -30vw 0 
 
    } 
 
    100% { 
 
    background-position: 70vw 0 
 
    } 
 
} 
 

 
.c-animated-background { 
 
    animation-duration: 1.5s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: fff; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
    padding-top: 50px; 
 
    -webkit-backface-visibility: hidden 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body class="c-animated-background"> 
 
</body> 
 

 
</html>

Source

2017-10-05 06:17:52

CSS - animation infinie (mouvement à gradient de chargement à droite) scintille

Répondre

Questions connexes