Animation CSS / jQuery

Julien Depaule
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Voila j'ai une petite question, je fais actuellement la création d'un site web pour une photographe.
Je lui est fais la page d'accueil suivante: http://dev.samghami.com/severine/accueil/
Lorsque vous passez votre souris sur les images il y a une petite animation. Seulement j'ai été obliger de mettre du jQuery sinon dés l'affichage de la page l'animation commencé. Est-ce normal ?
Voici les code: index.html

index.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Séverine T. - Portfolio</title>
    <link rel="stylesheet" type="text/css" href="css/accueil.css">

</head>
<body>

    <header>
        <h1>Severine T.</h1>
    </header>
    <section>
        <article class="art-1">
            <div class="subtitle">
                <p>Présentation</p>
            </div>
            <div class="block-hidden1"></div>
        </article>
        <article class="art-2">
            <div class="subtitle">
                <p>Gallerie</p>
            </div>
            <div class="block-hidden2"></div>
        </article>
        <article class="art-3">
            <div class="subtitle">
                <p>Tarifs</p>
            </div>          
            <div class="block-hidden3"></div>
        </article>
        <article class="art-4">
            <div class="subtitle">
                <p>Contact</p>
            </div>          
            <div class="block-hidden4"></div>
        </article>
    </section>
    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="js/anime.js"></script>
</body>
</html>

Le SCSS:

@import "compass";
@font-face{
    font-family: "raisin_des_sables";
    src: url('../fonts/raisin_des_sables.ttf');
}

@keyframes nomAnim {
    from {
        visibility: hidden;
        height:24%;
        @include opacity(0);
    }
    to{
        visibility: visible;
        height:34%;
        @include opacity(0.7);
    }
}
@keyframes nomAnimOut{
    from {
        height: 34%;
        @include opacity(0.7);
        visibility: visible;
    }
    to{
        visibility: hidden;
        height: 0%;
        @include opacity(0);
    }
}
html{
    height: 94%;
}
body{
    min-height: 95%;
    height: 95%;
    margin: 0;
    padding: 0;
    background: rgb(40,39,34);
}

.art-1:hover .block-hidden1, .art-2:hover .block-hidden2, .art-3:hover .block-hidden3,.art-4:hover .block-hidden4{
        visibility: visible;
        @include animation(nomAnim 0.5s);
        @include opacity(0.7);
}
header{
    margin-left: 10%;
    margin-top: 5%;
    h1{
        font-family: "raisin_des_sables";
        font-size: 50px;
        color:#efd807;
    }
}
section{
    max-width: 90%;
    height: 75%;
    margin:0px auto;
}
article{
    width: 24%;
    height:90%;
    background-color: #F00;
    display: inline-block;

    position: relative;

        @include box-shadow(black 2px 2px 10px);

    /* Paragraphe de titre */
    .subtitle{
        text-align: center;
        font-family: "raisin_des_sables";
        font-size: 28px;
        position: relative;
        top:64%;
        z-index: 1000;
    }
    .blc-h{
    @include animation(nomAnimOut 0.5s);    
    }
    .block-hidden1, .block-hidden2, .block-hidden3, .block-hidden4{
        background: #ccc;
        width:100%;
        height:34%;     
        position: absolute;
        bottom: 0;
    visibility:hidden;
    }
}   
$fon:#FF0000;
article:hover{
    background:darken(#800, 20%);
 @include transition-duration(0.5s);
}

article.art-1{
    @include border-radius(8px 0 0 8px);
    background: url("../img/1.png") no-repeat center;
}
article.art-4{
    @include border-radius(0 8px 8px 0);
    background: url("../img/2.png") no-repeat center;
}
article.art-2{
    background: url("../img/3.png") no-repeat center;
}
article.art-3{
    background: url("../img/4.png") no-repeat center;
}
article.art-1, article.art-2, article.art-3, article.art-4{
    background-size: 100% 100%;
}

Le JS:

 $(".art-1").mouseout(function(){
    $(".blc-h").removeClass("blc-h");   
    $(".block-hidden1").addClass("blc-h");
});
  $(".art-2").mouseout(function(){
    $(".blc-h").removeClass("blc-h");   
    $(".block-hidden2").addClass("blc-h");
});
   $(".art-3").mouseout(function(){
    $(".blc-h").removeClass("blc-h");   
    $(".block-hidden3").addClass("blc-h");
});
    $(".art-4").mouseout(function(){
    $(".blc-h").removeClass("blc-h");   
    $(".block-hidden4").addClass("blc-h");
});

Ce que je veux

Je voudrai savoir si l'animation est possible sans le JS. Est-ce que l'on peut faire une animation (comme l'actuel) mais que l'orsque la souris ne survol plus l'élèment, l'animation inverse se produit ? C'est le cas actuellement mais je souhaiterai savoir si c'est possible sans jQuery ?

2 réponses

Grafikart

Je dirais que oui.

  • Tu donne à ton élément le style avec la zone blanche masqué, et tu met une transition: all 0.3s; sur les élément à animer
  • Au hover, tu change les propriété de l'élement blanc.

Globalement tu utilise les transitions plutôt que les keyframes

MrCastor

Pour illustrer ce que te propose Graf' :

article {
    height: 90%:
    overflow: hidden;
  .block-hidden {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(100%);
      transition: transform .3s ease;
  }
  &:hover {
    .bloc-hidden {
        transform: translateY(0);
        transition: transform .3s ease;
    }
  }
}