web-dev-qa-db-fra.com

Puis-je appliquer des animations aux marges?

J'essaie d'animer dans les marges CSS3, ce qui ce site semble dire que vous pouvez, mais je ne peux pas travailler.

J'ai en fait 3 animations. 1 pour un simple fadeIn initial au chargement initial, puis les 2 autres pour l'animation margin au clic. J'ai aussi juste essayé margin au lieu du haut et du bas mais toujours aucun signe de son fonctionnement.

Cliquez sur une section pour voir le basculement de l'animation.

$(".section").click(function() {
    $(this).toggleClass("open");
});
body{
    background: #f1f1f1;
}

.section{
    display: block;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
    margin: 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
</div>

Voici un JSFiddle: http://jsfiddle.net/ybh0thp9/3/

htmlcsscss-animations
17
denislexic

Vous n'avez pas besoin d'images clés pour cela: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

Vous devez ajouter la propriété de transition à l'élément de base que vous souhaitez animer.

Vous avez également mentionné que vous vouliez un changement d'opacité, mais je ne vois pas comment cela est possible étant donné que vous n'avez qu'un seul élément sans enfants. Je veux dire: vous ne pouvez pas cliquer sur l'élément s'il est caché.

Ce que vous pouvez faire, cependant, est d'ajouter de l'opacité à l'ensemble: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Ou encore plus joli, avec une transformation:

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section {
    margin: 0;
    opacity: 0.7;
    transform: scale(0.85);
    transition: all 700ms;
}
.section.open {
    margin: 20px 0;
    opacity: 1;
    transform: scale(1);
}

Par commentaire, vous souhaitez estomper les éléments lors du chargement de la page. Nous pouvons le faire en ajoutant une classe init.

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS

Avec des images clés: http://jsfiddle.net/BramVanroy/ybh0thp9/14/

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

-webkit-animation: fadeIn 1.5s ease;    
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;
36
Bram Vanroy

Pour créer des animations avec CSS3, vous devez:

  1. Créez une classe avec un attribut d'animation; pour fonctionner dans certains navigateurs, vous devez mettre des préfixes: -webkit-, -o-, -moz-.
  2. Créer des images clés d'animation

voir l'exemple:

.animate{
    animation: myAnimation 10s; 
    animation-direction: alternate;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-timing-function: 1;
    animation-direction: alternate;

    -webkit-animation: myAnimation 10s;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    -webkit-animation-timing-function: 1;
    -webkit-animation-direction: alternate;

    -moz-animation: myAnimation 10s;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 0;
    -moz-animation-timing-function: 1;
    -moz-animation-direction: alternate;

    -o-animation: myAnimation 10s;
    -o-animation-direction: alternate;
    -o-animation-play-state: running;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 0;
    -o-animation-timing-function: 1;
    -o-animation-direction: alternate;
}

    @keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 50px}
        25%     { margin-top: 100px; margin-left: 50px }
        50%     { margin-top: 0; margin-left: 50px }
        75%     { margin-top: 100px; margin-left: 50px }
        100%    { margin-top: 0; margin-left: 50px }
    }
    @-webkit-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-moz-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-o-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
0
ErasmoOliveira