CSS-анимация: как вызвать обратную анимацию?

Я пытаюсь создать простой многоразовый класс CSS, чтобы эта анимация была у меня повсюду.

Все работает нормально, за исключением того, что я не могу найти ни одного примера / документации о том, как запустить обратную анимацию.

Вот мой HTML:

<div class="cards">
        <div class="card">
            <div class="frontpage">
                <img src="http://lorempixel.com/400/200/"/>
            </div>
            <div class="rearpage">
                <img src="http://lorempixel.com/g/400/200/"/>
            </div>
        </div>

        <div class="card">
            <div class="frontpage">
                <img src="http://lorempixel.com/400/200/"/>
            </div>
            <div class="rearpage">
                <img src="http://lorempixel.com/g/400/200/"/>
            </div>
        </div>
</div>

Моя анимация представляет собой анимацию, похожую на "перевертывание карты", с использованием простого toggleClass в Javascript для запуска анимации:

$('.card').click(function(){
    $(this).toggleClass('opened');
});

А вот мой CSS:

.cards {
    width: 800px;
    margin: auto;
}

.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
}

.card .frontpage, .card .rearpage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}


.card .rearpage {
    width: 0%;
}

.card .frontpage img, .card .rearpage img {
    width: 100%;
    height: 100%;
}


/***** ANIMATIONS *****/

/* ANIMATION 1 */
.card .frontpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .frontpage {
    -webkit-animation-name: frontToRear;
}

@-webkit-keyframes frontToRear {
    0% { width: 100%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 0%; }
}

/* ANIMATION 2 */
.card .rearpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .rearpage {
    -webkit-animation-name: rearToFront;
}

@-webkit-keyframes rearToFront {
    0% { width: 0%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 100%; }
}

Как это сделать разумно? Хотел бы я просто поставить какой-нибудь триггер на свой .rearcard, чтобы вызвать обратную анимацию, но я не могу найти способ сделать это.

Я знаю, что мог бы просто написать две другие «перевернутые» анимации и применить их, но это кажется настолько глупым, что я не могу попытаться сделать лучше.

Я установил jsfiddle, чтобы помочь вам проанализировать и проверить: http://jsfiddle.net/9yp3U/


animation css css-animations
person MaximeBernard    schedule 26.06.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Ваш подход с полями и шириной для имитации поворота очень интересен, но вы можете сделать это намного проще с rotateY

.cards {
    width: 800px;
    margin:auto;
    -webkit-perspective:1000;
}    
.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
    -webkit-transition: 1s ease-in;
    -webkit-transform-style: preserve-3d;
    -webkit-transform:translateZ(1px);
}    
.card .frontpage, .card .rearpage, img {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0; 
    left:0;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}
.card img {
    width: 100%;
    height: 100%;
}    
.card .rearpage,
.card.opened {
    -webkit-transform:rotateY(180deg);
}

Демо

Что касается заданного вами вопроса, вы можете воспроизводить анимацию в обратном направлении, используя свойство animation-direction:backwards, но с переключением анимации CSS сложно. Таким образом, я бы рекомендовал вам использовать вместо этого transition, поскольку это всего лишь изменение между двумя состояниями.

И, к вашему сведению, селектор CSS не всегда должен быть в формате parent child. В вашем случае применение только .child будет делать то же самое. Селектор parent child необходим только тогда, когда требуется более высокая специфичность селектора, чем существующие свойства.

Ах да, к вашему сведению, jQuery для этого не нужен. Я включил (непроверенный) эквивалент javascript, если хотите. Если это единственное место, где вы используете jQuery на своей странице, я бы рекомендовал не использовать его, потому что загрузка всей библиотеки jQuery занимает некоторое время и данные.

person Zach Saucier    schedule 28.06.2014
comment
Спасибо за советы. Несколько дней назад я прочитал о методе translate для анимации, который действительно намного проще. 1. Но является ли один из этих методов более эффективным для мобильных устройств? Я вижу, что свойства preserve-3d и backface-visibility: hidden используются для отображения задней страницы. 2. Но я не понимаю, для чего используется translateZ (1px)? 3. Селектор .card.opened делает очевидным, что анимация установлена ​​в div .card. Но если вы сделаете анимацию на .card .rearpage, анимация будет установлена ​​на div.rearpage, верно? Не на его родителе (div.card)? - person MaximeBernard; 04.07.2014
comment
1. С точки зрения производительности transform будет работать лучше, потому что это влияет только на то, как элемент визуализируется, а не на сам элемент. 2. translateZ(1px) используется для принудительного рендеринга графическим процессором, подробнее об этом проверьте здесь. 3. Вы правы. Используя запятую, вы можете применить одни и те же свойства к нескольким элементам. Помещая его на .rearpage, вы устанавливаете его для инициализации на заднем размере .... - person Zach Saucier; 04.07.2014
comment
... Установив его на .opened, вы разрешаете вращать всю карту при ее переключении. - person Zach Saucier; 04.07.2014