Как удалить картинку после анимации в CSS?

Question

[12ytlesss]

Хочу чтобы картинка плавно появлялась и исчезала, но после анимации она приходит в исходное состояние.

.logo{
    margin-left: 570px;
    margin-top: 150px;
    overflow:hidden;
    overflow-y:hidden; 
    overflow-x:hidden;
    animation-name: Appearance;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(.1,-.6,.2,0);
}



  
  @-webkit-keyframes Appearance {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0; display: none;}
  }
  
  @-o-keyframes Appearance {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0; display: none;}
  }
  
  @-moz-keyframes Appearance {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0; display: none;}
  }
  
  @keyframes Appearance {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0; display: none;}
 }

Answer 1

[inzeppelin]

У вас исходное состояние описано в самом начале. Если вы хотите чтобы "исходное состояние" было с невидимой картинкой, то скажите об этом явно :)

.logo{
    margin-left: 570px;
    margin-top: 150px;
    overflow:hidden;
    overflow-y:hidden; 
    overflow-x:hidden;
    animation-name: Appearance;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(.1,-.6,.2,0);

    opacity: 0; // вот тут говорим, что "исходное состояние" картинки – прозрачная
}

Comments

[12ytlesss]

Спасибо большое

[12ytlesss]

А можно ли потом после анимации удалить его? Что бы оно не отображалось на странице?

[inzeppelin]

12ytlesss, это уже сложнее. Физически удалить элемент из DOM-дерева можно используя Javascript. Но задача синхронизации CSS анимации и JS нетривиальная. Возможно вам стоит посмотреть в сторону библиотек для анимации на JS.