Transition CSS3 - Effet de fondu enchaîné

Question

Transition CSS3 - Effet de fondu enchaîné

Demandé el 9 de Avril, 2013: Quand la question a-t-elle été
455458 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de mettre en œuvre l'effet "fade out" en pure CSS. Voici le modèle violon . J'ai cherché quelques solutions en ligne, mais après avoir lu l'avis de la documentation en ligne J'essaie de comprendre pourquoi l'animation des diapositives ne fonctionne pas. Avez-vous des pistes ?

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

Demandé el 9 de Avril, 2013 par Utilisateur non enregistré

Answer 1

3 Réponses

Answer 2

3voto

Utilisateur non enregistré Points 0

.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

Démonstration ici.

Répondu el 1 de Juillet, 2014 par Utilisateur non enregistré (0 Points )

Answer 3

0voto

Vivid_Darkness Points 3

Utilisez le forwards fill-mode en CSS pour qu'il reste sur la dernière partie de l'animation.

Je suggère d'utiliser transform: tranlsateY(-20px); au lieu d'utiliser les positions css, mais si vous insistez pour l'utiliser, définissez l'élément .dummy-wrap position dans absolute

.dummy-wrap {
  animation: slideup 2s forwards;
  -moz-animation: slideup 2s forwards;
  -webkit-animation: slideup 2s forwards;
  -o-animation: slideup 2s forwards;
  position: absolute;
}

@keyframes slideup {
    0% {
        top: 0px;
    }
    75% {
        top: 0px;
    }
    100% {
        top: -20px;
    }
}

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

Répondu el 2 de Février, 2022 par Vivid_Darkness (3 Points )

Answer 4

-1voto

Nishant Kaushik Points 26

Cela peut aider :-

<!DOCTYPE html>
<html>
<head>
<style>

.cardiv{
    height:200px;
    width:100px;
    background-color:red;
    position:relative;
    text-align:center;
    overflow:hidden;
}
.moreinfo{
    height:0%;
    transition: height 0.5s;
    opacity:1;
    position: absolute;
    bottom:0px;
    background-color:blue;
}

.cardiv:hover .moreinfo{

    opacity: 1;
    height:100px;
}
</style>
</head>
<body>

<div class="cardiv">
    <div class="moreinfo">Hello I am inside div</div>
</div>

</body>
</html>

Répondu el 18 de Août, 2021 par Nishant Kaushik (26 Points )

Transition CSS3 - Effet de fondu enchaîné

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Transition CSS3 - Effet de fondu enchaîné

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: