Как сделать анимацию заполнения png цветом при загрузке страницы

NikroVir · 20 Дек 2014

Мне получается нужно не заполнять див градиентом, а наоборот, убирать заполнение, как это изменить?

Код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body{background:#000}
  @-webkit-keyframes my{  from{right: 0px;}  to{right: 642px;}  }
  .container{
  overflow: hidden;
  position: relative;
  height: 110px;
  width: 642px;
  margin: auto;
  border: 1px solid #000;
  background:none
  }

  .container:after{
  content: "";
  background: #000;
  position: absolute;
  top: 0;
  height:110px;
  width: 642px;
  z-index: 2;
  -webkit-animation: my 1s linear;
  animation: my 1s linear;


  }

  .block{
  height: 110px;
  width: 642px;
  position: absolute;
  top: 0;
  z-index: 2;
  text-align: center;
  line-height: 110px;
  background: url(images/h-l.png) top center!important;}
  }
  </style>
</head>
<body>
<div style="width:980px;margin:0 auto">
  <div class="container">
  <div class="block">blablabla</div>
  </div>
  <div>
  <div style="background: url(images/h-l.png) top center!important;width:490px;height:100px;float:left}"></div>
  <div style="background: url(images/h-r.png) top center!important;width:490px;height:100px;float:left}"></div>

  <div style="background: url(images/f-l.png) top center!important;width:490px;height:100px;float:left}"></div>
  <div style="background: url(images/f-r.png) top center!important;width:490px;height:100px;float:left}"></div>
  </div>
</body>
</html>

Сначала прорисовывет как надо, затем в конце снова черный блок
как сделать чтобы когда отрисовка черного фона с 100% до 0% прошла все осталось как есть без черного?

Как я уже писал выше, нужно анимируемому блоку нужно задавать стили, которые будут после окончания анимации. Короче говоря добавьте right: 642px; в .container:after и всё заработает

UPD: и если я вас правильно понял, то вы зря сменили z-index на 2 у .container:after, это же блок с бэкграундом, который должен идти ПОД изображением, или что там у вас...

PS: было бы куда проще вам помогать, если бы вы выложили хотябы часть вёрстки на codepen.io например. А то вы просите помочь основываясь на 5 дивах, с CSS имеющим косвенное отношение к тому что нужно сделать. Создаётся не полная картина работы

NikroVir · 20 Дек 2014

Написал для вас идеальный (почти идеальный, всётаки 5 утра уже) вариант, готовый для употребления и под ваши 5 дивов, со всеми префиксами, дабы вы меня больше не мучили. Даже анимацию сделал как вы просили. Загляните под спойлер.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @-webkit-keyframes my-left{
            from{left: 0;}
            to{left: -490px;}
        }
        @-moz-keyframes my-left{
            from{left: 0;}
            to{left: -490px;}
        }
        @-o-keyframes my-left{
            from{left: 0;}
            to{left: -490px;}
        }
        @keyframes my-left{
            from{left: 0;}
            to{left: -490px;}
        }
        @-webkit-keyframes my-right{
            from{left: 0;}
            to{left: 490px;}
        }
        @-moz-keyframes my-right{
            from{left: 0;}
            to{left: 490px;}
        }
        @-o-keyframes my-right{
            from{left: 0;}
            to{left: 490px;}
        }
        @keyframes my-right{
            from{left: 0;}
            to{left: 490px;}
        }
        .container{
            width: 980px;
            margin: auto;
        }

        .wrapper-left, .wrapper-right{
            overflow: hidden;
            position: relative;
            width: 490px;
            height: 100px;
            float: left;
        }

        .wrapper-left{background: url(images/h-l.png) top center!important;}

        .wrapper-right{background: url(images/h-r.png) top center!important;}

        .wrapper-left:after, .wrapper-right:after{
            content: "";
            background: red;
            position: absolute;
            top: 0;
            width: 490px;
            height: 100px;
            z-index: 1;
        }

        .wrapper-left:after{
            -webkit-animation: my-left 3s linear;
            -moz-animation: my-left 3s linear;
            -o-animation: my-left 3s linear;
            animation: my-left 3s linear;
            left: -490px;
        }

        .wrapper-right:after{
            -webkit-animation: my-right 3s linear;
            -moz-animation: my-right 3s linear;
            -o-animation: my-right 3s linear;
            animation: my-right 3s linear;
            left: 490px;
        }

        .block{
            width: 490px;
            height: 100px;
            position: absolute;
            top: 0;
            z-index: 2;
            line-height: 100px;
            text-align: center;
        }
        </style>
</head>
<body>
<div class="container">
<div class="wrapper-left"><div class="block"></div></div>
<div class="wrapper-right"><div class="block"></div></div>

<div class="wrapper-left"><div class="block"></div></div>
<div class="wrapper-right"><div class="block"></div></div>
</div>
</body>
</html>

PS: Табуляцию не сохранял, т.к. лень заморачиваться.

UPD: хоть бы спасибо сказали чтоли

Как сделать анимацию заполнения png цветом при загрузке страницы

NikroVir

Извращённый отшельник

NikroVir

Извращённый отшельник