爲什麼這個動畫/轉換不起作用？

爲什麼這不起作用？我想在開始時，我的元素類將不可見，並逐漸顯現出來。爲什麼這個動畫/轉換不起作用？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css"> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <div class="element"></div> 
    </body> 
</html>

和我的CSS：

.element { 
    width: 200px; 
    height: 200px; 
    background: purple; 
    transition-duration: 3s; 
    -webkit-transition-duration: 3s; 
    animation-name: coucou; 
} 


@keyframes coucou { 
    from { 
     opacity: 0;  
    } 
    to { 
     opacity: 1; 
    } 
}

來源

2016-02-28 idkn

添加鉻，Safari和Opera瀏覽器的特殊規則：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css"> 
     <meta charset="utf-8"> 
     <style type="text/css"> 
      .element { 
    width: 200px; 
    height: 200px; 
    background: purple; 
    -webkit-animation: coucou 5s infinite; /* Chrome, Safari, Opera */ 
    animation: coucou 5s infinite; 
} 


@keyframes coucou { 
    from { 
     opacity: 0;  
    } 
    to { 
     opacity: 1; 
    } 
} 

@-webkit-keyframes coucou { 
    from { 
     opacity: 0;  
    } 
    to { 
     opacity: 1; 
    } 
} 
     </style> 
    </head> 
    <body> 
     <div class="element"></div> 
    </body> 
</html>

來源

2016-02-28 16:59:50

.element 
    { 
     width: 200px; 
     height: 200px; 
     background: purple; 
     transition: all 0.5s ease-in-out 0s; 
     opacity: 0; 
    } 
    .element:hover 
    { 
     width: 400px; 
     transition: all 0.5s ease-in-out 0s; 
     opacity: 1; 
    }

來源

2016-02-28 17:04:07

爲什麼這個動畫/轉換不起作用？

回答

相關問題