【问题标题】:fade transition to a div on load [duplicate]加载时淡入淡出过渡到 div [重复]
【发布时间】:2016-10-19 11:21:17
【问题描述】:

您能否在加载时仅使用 CSS 对 div 应用淡入淡出过渡?我有一个 div,它最初应该是透明的,几秒钟后应该变成黄色。我知道可以在状态更改(例如悬停)时执行此操作。有人可以帮忙吗?

干杯

#content {
    background-color: #FF0;
    height: 100px; width: 100px;
    -webkit-transition: background-color 10000ms linear;
    -moz-transition: background-color 10000ms linear;
    -o-transition: background-color 10000ms linear;
    -ms-transition: background-color 10000ms linear;
    transition: background-color 10000ms linear;
}
<div id="content"></div>

【问题讨论】:

    标签: html css


    【解决方案1】:
    @keyframes fadeInAnimation{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
    

    }

    #content {
    animation-name: fadeInAnimation;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
    background-color: #FF0;
    height: 100px; width: 100px;
    -webkit-transition: background-color 10000ms linear;
    -moz-transition: background-color 10000ms linear;
    -o-transition: background-color 10000ms linear;
    -ms-transition: background-color 10000ms linear;
    transition: background-color 10000ms linear;
    

    }

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-02-04
      • 1970-01-01
      • 1970-01-01
      • 2020-08-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多