animations CSS ne fonctionne pas

J'ai une simple animation CSS à disparaître dans le texte:animations CSS ne fonctionne pas

#title{ 
    animation: text 2s; 
    -webkit-animation: text 2s; 
    -moz-animation: text 2s; 
    -o-animation: text 2s; 
    font-family: 'Lato300', sans-serif; 
    height: 115px; 
    position: absolute; 
    bottom: -10px; 
    left: 0; 
    right: 0; 
    margin-bottom: auto; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

@keyframes text{ 
    0% {display: none;} 
    100% {display: inline;} 
} 

@-moz-keyframes text{ 
    0% {display: none;} 
    100% {display: inline;} 
} 

@-webkit-keyframes text{ 
    0% {display: none;} 
    100% {display: inline;} 
} 

@-o-keyframes text{ 
     0% {display: none;} 
    100% {display: inline;} 
}

Le HTML:

<div id="title"><h1>Text goes here</h1></div>

Pour une raison quelconque, l'animation ne joue pas. Quelqu'un sait-il pourquoi? (J'ai gardé tout le code au cas où quelque chose d'autre causerait le problème)

Source

2013-04-06 william44isme

W pas de jquery? depuis l'animation CSS ne supporte pas dans tous les navigateurs? – Dolo

Non, c'est supporté dans Safari, c'est ce que j'utilise. Les gens avec un navigateur plus ancien sont habitués au web qui semble un peu décevant et daté. – william44isme

Vous ne pourrez pas animer la propriété display. Cependant, vous pouvez passer un opacity

@-webkit-keyframes text { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
}

http://jsfiddle.net/5FCZA/

Source

2013-04-06 07:47:17 dfsq

Merci! Bien que je pensais que vous pouviez utiliser 'display', cela fonctionne dans les transitions ... – william44isme

' display' ne peut pas être animé. Il fait la différence parce qu'un élément ne peut pas être partiellement * caché *. C'est soit sur une page ('display: block, inline-block') ou non (' display: none'). – dfsq

Bien sûr! Cela prend tout son sens, merci pour l'info. – william44isme

shake 
@-webkit-keyframes text { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 
} 

or rotate 
@-webkit-keyframes text { 
    0% {-webkit-transform: scale(1);} 
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 
    100% {-webkit-transform: scale(1) rotate(0);} 
}

Source

2013-04-06 08:00:51

Pour toute personne à l'avenir connaît un problème similaire je résolu ce problème en ajoutant

display:block

la durée Je tentais pour animer

Source

2016-06-09 16:02:48

animations CSS ne fonctionne pas

Répondre

Questions connexes