2.21. CSS3-анимация

css3-animationCSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.

CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Введение в CSS-анимацию

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini:
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

See the Pen square loader by Elena Nazarova (@nazarelen) on CodePen.

1. Правило @keyframes

Создание анимации начинается с установки ключевых кадров правила @keyframes. Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.

@keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

@keyframes move {
from, 
to {
top: 0;
left: 0;
}
25%, 
75% {top: 100%;}
50% {top: 50%;}
}

Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

После объявления правила @keyframes, мы можем ссылаться на него в свойстве animation:

h1 {
font-size: 3.5em;
color: darkmagenta;
animation: shadow  2s infinite ease-in-out;
}

Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff, width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).

2. Название анимации animation-name

Свойство задаёт имя анимации. Имя анимации создаётся в правиле @keyframes. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _. Свойство не наследуется.

animation-name
Значения:
имя анимации Имя анимации, которое связывает правило @keyframes с селектором.
none Значение по умолчанию, означает отсутствие анимации. Также используется, чтобы отменить анимацию элемента из группы элементов, для которых задана анимация.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {animation-name: mymove;}

3. Продолжительность анимации animation-duration

Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.

animation-duration
Значения:
время Длительность анимации задается в секундах s или миллисекундах ms.
initial Устанавливает значение свойства в значение по умолчанию 0.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {animation-duration: 2s;}

4. Временная функция animation-timing-function

Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2). Не наследуется.

animation-timing-function
Значения:
ease Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linear Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
ease-in Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
ease-out Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).
ease-in-out Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1. На этом сайте вы сможете построить любую траекторию скорости изменения анимации.
step-start Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Эквивалентно steps(1, start).
step-end Пошаговая анимация, изменения происходят в конце каждого шага. Эквивалентно steps(1, end).
steps(количество шагов,start|end) Ступенчатая временная функция, которая принимает два параметра. Количество шагов задается целым положительным числом. Второй параметр необязательный, указывает момент, в котором начинается анимация. Со значением start анимация начинается в начале каждого шага, со значением end — в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {animation-timing-function: linear;}

See the Pen xEAJZg by Elena (@html5book) on CodePen.

С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.

See the Pen VKvWQW by Elena (@html5book) on CodePen.

5. Анимация с задержкой animation-delay

Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки.

Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration. Не наследуется.

animation-delay
Значения:
время Задержка анимации задается в секундах s или миллисекундах ms. Значение по умолчанию 0.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {animation-delay: 2s;}

See the Pen vEapjj by HeleN (@nazarelen) on CodePen.

6. Повтор анимации animation-iteration-count

Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.

animation-iteration-count
Значения:
число С помощью целого числа задается количество повторов анимации. Значение по умолчанию 1. Дробные значения больше 1 будут воспроизводить анимацию, обрезая её на части следующей итерации.
infinite Анимация проигрывается бесконечно.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {animation-iteration-count: 3;}

7. Направление анимации animation-direction

Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.

animation-direction
Значения:
alternate Анимация проигрывается с начала до конца, затем в обратном направлении.
alternate-reverse Анимация проигрывается с конца до начала, затем в обратном направлении.
normal Значение по умолчанию, анимация проигрывается в обычном направлении, с начала и до конца.
reverse Анимация проигрывается с конца.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {animation-direction: alternate;}

See the Pen GjpExx by Elena (@html5book) on CodePen.

8. Краткая запись анимации

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation, перечислив их через пробел:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration, остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay.

9. Проигрывание анимации animation-play-state

Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние :hover. Не наследуется.

animation-play-state
Значения:
paused Останавливает анимацию.
running Значение по умолчанию, означает проигрывание анимации.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div:hover {animation-play-state: paused;}

See the Pen EjRagd by Elena Nazarova (@nazarelen) on CodePen.

10. Состояние элемента до и после воспроизведения анимации animation-fill-mode

Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.

animation-fill-mode
Значения:
none Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
forwards Воспроизводит анимацию до последнего кадра по окончанию последнего повтора и не отматывает ее к первоначальному состоянию.
backwards Возвращает состояние элемента после загрузки страницы к первому кадру, даже если установлена задержка animation-delay, и оставляет его там, пока не начнется анимация.
both Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {animation-fill-mode: forwards;}

See the Pen pEjwLX by Elena (@html5book) on CodePen.

11. Множественные анимации

Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:

div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}

Возможно, вас также заинтересует

  • Аноним

    Большое спасибо за материал!

  • campusboy

    Удобная для изучения статья, спасибо! Было бы круто, если бы при прочтении рядом сбоку или вверху фиксировано при прокрутке ехал блок и с перечислением всего синтаксиса. Как бы читаешь и в блок поглядываешь, что вот это свойство идет после этого.

    • Спасибо, хорошая идея, подумаю. Правда, для мобильных не сработает (

      • campusboy

        Ну изучать такие статьи с помощью мобильного то ещё извращение 🙂 практиковаться то всё равно на компе и всё равно прибегать к справке (статье).

  • Charly Chaplin

    Спасибо за подробное описание и наглядные примеры. Все очень легко для изучения. )

  • SkeLetOn

    Прошу помочь. Мне нужно, чтобы анимация останавливалась и не возвращалась на изначальную позицию.Код типа этого:

    .container{

    width:60px;

    height:60px;

    background:#000;

    display:inline-block;

    }

    #q{

    animation:animation 4s linear 1s .5;

    }

    #w{

    animation:animation2 4s linear 3s .5;

    }

    @keyframes animation{

    from{

    transform:rotateX(0deg);

    }

    to{

    transform:rotateX(180deg);

    }

    }

    @keyframes animation2{

    from{

    transform:rotateY(0deg);

    }

    to{

    transform:rotateY(180deg);

    }

    }

  • SkeLetOn

    А не могли бы Вы мне ещё кое с чем помочь.

  • SkeLetOn

    Мне нужно чтобы при нечётном нажатии выполнялась одна анимация, а при чётном та же самая, но уже наоборот(от 100% к 0%)

    • Средствами CSS на одном элементе такой эффект не сделать, только с помощью скрипта.

  • SkeLetOn

    Я тут подумал

  • SkeLetOn

    А может использовать для этого alternate

  • SkeLetOn

    А как Вы сделали кнопку для начала анимации??При помощи animation-play-state???
    И я подумал, может при помощи alternate получится воспроизвести анимацию, про которую я спрашивал?

    • Все примеры демонстрируются на странице благодаря встроенному редактору, кнопка на скрипте. Вся проблема в том, что на один элемент может быть один вариант :hover

  • Алексей

    Спасибо большое за материал!
    Мне всё более-менее понятно, с поправкой на то, что я про это уже немного читал.
    Очень интересен пример с часами. Скажем, примечательно как Вы смещение циферблата сделали с помощью марджин в половину размера блока. Пришлось разбираться сначала каким образом элементы циферблата смещаются при абсолютном позиционировании. При чтении кода сразу не очевидно что bottom: 0 это не идентично top: 100%. Получается марджин компенсирует на 50% от размера элемента в те стороны, которые указаны в позиционировании. Скажем top: 0 left: 50% за счёт отрицательного марджина смещается вверх на 50% от размера элемента и влево на столько же. Это угадывается, но совсем не очевидно из кода, как именно оно работает. Поэтому было бы здорово, по возможности, комментировать код.
    Подобный пример компенсации смещения на размер элемента Вы, в основном, в примере, компенсируете через свойство calc. Также, насколько мне известно, это делается с помощью transform: translate ну и вот через марджин можно оказывается.
    Думаю, человек, знакомый с синтаксисом CSS, но не имеющий большого опыта его применения, над этим долго бы думал, и комментарии для чего применяется то или иное свойство, могло бы ему здорово помочь отказаться от гадания на кофейной гуще 🙂
    Не совсем понятно свойство animation: clock 3s steps(60, end) infinite;
    что такое степс интуитивно понятно, каким справочником Вы пользуетесь для уточнения синтаксиса? И зачем нужно 3 секунды, затем что у animation есть минимальный набор параметров? Просто в коде ниже указано что время анимации 60 секунд, почему для свойства animation нельзя было сразу установить 60 секунд?
    А так в целом, спасибо большое, материал отличный, смотрю тут рожицы на форуме
    http://htmlforum.ru/index.php?showtopic=53862
    разбираюсь с кодом, вот Ваш материал помог! 🙂

    • Пожалуйста! Рада слышать вас снова Алексей) Мне очень импонирует ваш интерес и настойчивость в освоении веб-технологий. Спасибо за комментарии, они полезны не только читателям, но и мне, иногда находятся неточности или же проверяется то или иное свойство на практике.

      В отношении clock 3s steps(60, end) infinite; следует читать clock 60s steps(60, end) infinite; Опечатка, и эти 3 секунды не действовали, потому что ниже продолжительность была переопределена. Стрелка часов движется по кругу за 60 шагов в течение 60 секунд.

      Про пошаговую анимацию я кратко писала в уроке http://html5book.ru/urok-sozdanie-animacii/, можете посмотреть.

      Рожицы на форуме интересные, но к сожалению, анимация в таком виде на практике редко будет уместна, я больше склоняюсь к css-переходам.

      Прием с отрицательным margin при позиционировании можно использовать как альтернативу функции calc(). При позиционировании в 50% элемент не будет располагаться строго по центру, так как не учитывается его собственная ширина ()или высота). Поэтому используется отрицательный margin, равный половине его ширины. Т.е. такой способ работает только если для элемента ширина задана явно.

      !Обратите внимание, если при позиционировании используется left: 50% , то выравнивание по середине происходит за счет отрицательного margin-left, если top, то margin-top!

      Подробнее про способы позиционирования можете почитать http://html5book.ru/horizontal-vertical-alignment/.

      • Алексей

        Спасибо большое! Ссылки почитал, интересно. Насчёт переходов, наверное, Вы правы, но думаю и изучение анимации будет не лишним…
        Поздравляю с Новым Годом, желаю приятных открытий в любимом деле, творческих успехов, движения вперёд, а также здоровья и чтоб времени хватало на любимых, понимания во всём и взаимности :))

        • Спасибо за теплые слова! Вас тоже с праздником, помимо всех приятностей, без которых жить было бы сложно и грустно, желаю вам в этом году получить необходимые знания и применить их на практике. Буду рада слышать вас в новом году))

          Насчет изучения анимации — я не утверждаю, что это бесполезное занятие, наоборот, помогает развивать аналитические способности. Дело все в том, что чаще слышишь негатив в отношении всех этих эффектов, которые на самом деле больше раздражают и утомляют. А так, для саморазвития даже очень полезно.

      • Алексей

        По поводу центрирования текста мне очень нравится вот эта статья:

        http://frontender.info/centering-css-complete-guide/

  • SkeLetOn

    Ещё один вопрос. Я создаю сайт в нём задействую анимацию, но на мобильных устройствах он не будет работать, есть способы «борьбы» с этим?

    • Можно уточнить, какого плана будет анимация?

      • SkeLetOn

        .v{
        font-size:30px;
        position:fixed;
        top:-5px;
        right:100px;
        }
        .v:active{
        animation:q 1s linear alternate infinite forwards;
        }
        @keyframes q{
        from{
        transform:rotateY(0deg);
        }
        to{
        position:fixed;
        top:-5px;
        right:0;
        transform:rotateY(180deg);
        }
        }

        Смысл таков))

  • Сергей

    Подскажите, а как можно сделать задержку между анимациями в infinite?

    • Можно описать, какую анимацию вы хотите получить? Хочу отметить, что задержка будет видна только при первом проигрывании анимации, дальше пойдёт наложение анимаций

      • Сергей

        Как я понял, за первоначальную задержку в анимации отвечает animation-delay. А мне нужно как-то реализовать такой функционал, чтобы после каждой итерации анимации была пауза в 1 секунду.

        • Если в отношении одной анимации к одному элементу, можно попробовать {animation: имя_анимации 10s steps(5, end) infinite;} То есть анимация будет бесконечна, цикл будет 10 секунд за 5 шагов. Пошаговый пример есть в конце урока http://html5book.ru/urok-sozdanie-animacii/. С более сложными вариантами пока не экспериментировала.

          • Сергей

            Спасибо за ответ! Правда, не совсем то — первая итерация анимации растянулась на 10 сек:) Остановился пока на таком варианте — tada 1.5s ease-in-out 2;

          • Пожалуйста! Время 10 секунд я для примера дала, вы можете своё устанавливать. Для множественных анимаций такой способ я ещё не пробовала

  • Роман Спиридонов

    Помогите, как сделать, или где капнуть, что бы при нажатии на кнопочку play начиналась анимация, при остановке — останавливалсь. А при клике по другой кнопке, анимация начиналась на той кнопке, прекращаясь на первой и т.д.

    • Уточните, пожалуйста, речь идёт о разных анимациях одного элемента или разных анимациях нескольких элементов?

      • Роман Спиридонов

        Одна анимация для разных элементов

        • Я думаю, это можно реализовать с помощью jQuery, потому что css3-анимация может запускаться только при :hover и :target. Для примера посмотрите https://css-tricks.com/examples/jQueryStop/ и http://codepen.io/gabrieleromanato/pen/jEfbn.
          Еще как вариант — при проигрывании менять стрелку на иконку «пауза».

        • Недавно нашла этот сайт, может вам понравится, как реализована панель https://www.mixcloud.com/ibizaglobalradio/me-my-monkey-julio-15/?utm_campaign=onboarding_listens&play=onboarding_listens&utm_medium=email&utm_source=notification&utm_content=html

          • Алексей

            Очень известный сайт 🙂

          • Это точно, примеры оформления элементов растаскивают по сайтам. А вот недавно порадовала ссылка на Хабре:-D

          • Алексей

            Ну, Вы любите музыку?

          • Конечно. Если можно так сказать, любимая музыка — как специи для еды, добавляет в жизнь яркие нотки.

          • Алексей

            Замечательно! Просто это один из наиболее известных облачных сервисов для музыки, наряду с soundcloud.com
            Я тоже считаю музыку одним из важнейших явлений в моей жизни, помогающий осмысливать и даже ощущать все прочие явления… Кстати, сейчас птички очень красиво в лесу поют 🙂

          • Согласно, красиво, дождались весны наконец . Утки на речке тоже романтично крякают-хрюкают ))

  • Артур

    Друзья, я вот не могу понять почему у меня не работает созданная анимация @keyframes myfirst в .cont. Но работает нормально когда использую ее в div. Тоесть в селекторе класса не работает, а в селекторе тега все нормально.Почему так? надеюсь понятно сформулировал.

    • Сформулировали понятно, но сложно судить без кода. Бывает, унаследованные стили блокируют. Вы пишите анимацию на странице или в редакторе-песочнице? Нужно больше информации.

  • Владимир

    А есть ли возможность реализовать через CSS повтор анимации через определённый промежуток времени?

    • Через свойства анимации — нет. Но можно разбить анимацию на большее количество кадров и включить повтор в них, поставив увеличенное время для анимации. Или же попробовать как в примере с облаками http://codepen.io/nazarelen/pen/qOOxmj: два блока с одинаковыми стилями, но у второго такая же анимация с задержкой. Получается повтор через определённое время. Вместо второго блока можно добавить такую же анимацию для :before или :after этого же элемента.

  • Алексей

    Елена, Здравствуйте. Нужна ваша помощь. Есть вращающийся куб по горизонтали и вертикали, так вот по горизонтали в данный момент он все время вращается влево, согласно моей задумке, а вот как сделать чтобы он вращался вправо пока никак догадаться не могу, т.е куб вращается по вертикали и влево, нужно чтобы также по вертикали вращался, но по горизонтали вправо.

    html код :

    1
    2
    3
    4
    5
    6

    css код:

    @keyframes spincube {
    from,to {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
    transform: rotateY(-90deg);
    }
    33% {
    transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
    transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
    transform: rotateY(-270deg) rotateX(90deg);
    }
    83% {
    transform: rotateX(90deg);
    }
    }

    .cubespinner {
    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    transform-style: preserve-3d;
    transform-origin: 60px 60px 0;
    }

    .cubespinner div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid #8ECBDE;
    background: rgba(255,255,255,0.6);
    box-shadow: inset 0 0 20px #8ECBDE;
    line-height: 120px;
    text-align: center;
    font-size: 100px;
    color:#55BEDE;
    }

    .cubespinner .face1 {
    transform: translateZ(60px);
    }

    .cubespinner .face2 {
    transform: rotateY(90deg) translateZ(60px);
    }

    .cubespinner .face3 {
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    }

    .cubespinner .face4 {
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    }

    .cubespinner .face5 {
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    }

    .cubespinner .face6 {
    transform: rotateX(-90deg) translateZ(60px);
    }

    При таком раскладе, как я уже писал выше, куб вращается по вертикали и по горизонтали налево, а мне нужно что он вращался по вертикали также, а по горизонтали не налево, а направо.
    Сам пробовал экспериментировать, но получается коряво, обращаюсь к Вам за помощью.
    Заранее благодарен.

    • Здравствуйте, Алексей. Немного переделала ваш код, первый вариант — если хотите, чтобы текст на грани куба всегда был в одинаковом положении — http://codepen.io/html5book/pen/YGmZVv. Второй — исправленная ваша версия http://codepen.io/html5book/pen/NRQgEE.
      Замечания и дополнения:
      1) Чтобы вращение было в другую сторону, просто уберите минус в rotateY().
      2) Вы забыли задать перспективу, в данном случае я добавила её для элемента body.
      3) Чтобы при вращении не было неровности рёбер куба (обнаружила в FF), каждой грани нужно добавить еще размытую тень цвета основного фона (в данном случае 0 0 2px white).
      4) Сокращайте селекторы по возможности. Нет надобности в такой записи .cubespinner .face1{}. Пишите просто .face1{} (если это класс не используется еще где-то).
      5) В каждом кадре при вращении можно повернуть только на 90 градусов или 180. Поэтому transform: rotateY(-270deg) повернет грань не один раз.

      И всё же у меня остались вопросы, как это вообще работает. Нужно больше времени, чтобы разобраться. Мы видим трёхмерный куб, а браузер видит его плоским. Поэтому не совсем понятно, почему при повороте 83% {transform: rotateX(90deg) rotateZ(0deg);} он вращается в другую сторону.

      • Алексей

        Здравствуйте, Елена. Спасибо за ответ.
        1. Насчет 2 варианта — если я убираю (я уже ранее так делал) минус в rotateY(), то он действительно начинает вращаться сначала вправо, а потом через раз вращается влево и повторяется.
        Объясню для чего мне это надо, на самом деле у меня имеется блок шириной 800px и по его краям будут 2 куба, т.е слева будет куб который будет вращаться по вертикали и вправо, а справо будет куб котрый будет вращаться по вертикали и влево и высотой они будут всего 25px, не такой большой как в примере — это я дал для наглядности.

        И самое главное вместо текста у меня используется на гранях изображения и в примере который я дал, все изображения повернуты нормально, т.е фронтально на пользователя и куб вращается тоже нормально (проверял во всех браузерах) — т.е строго по вертикали и все время налево. Этот куб у меня будет располагаться в правой части блока, а нужен еще для левой части блока, точно такой же куб, конечно, изображения будут другими и вращение по вертикали оставляем, а вот направление вращение по горизонтали нужно изменить слева на направо, тогда будет получаться более эффектно, т.е имеется 2 куба и они вращаются в разные стороны, один налево, а другой направо.

        2. Перспектива мне не нужна, так как куб, как я уже повторяюсьбудет размером 25px плюс на каждой грани маленькие изображения, так что толку от перспективы будет мало.

        3. .cubespinner .face1{} — вообще у меня так .cubespinner_L .face1 и .cubespinner_R .face1 — т.е разные классы, так как 2 разных куба, вообще вы правы селекторы нужно сокращать.

        4. Примерно как-то так, посмотрите еще раз, пожалуйста, мой 1 вариант и вы увидите, что куб вращается по вертикали и налево, по вертикали и налево и все время так …, а 2 куб нужно чтобы вращался по вертикали и направо и все время так, чтобы не было поворота налево, все время направо.
        Во втором варианте куб вращается направо, но он также вращается и налево, что не нужно абсолютно.

        5. В css более или менее разбираюсь, а тут прямо казалось бы простую задачу решить не могу, все есть и как вы правильно написали. для того чтобы куб вращался в другую сторону уберите минус в rotateY(), я также тоже ранее делал, но куб продолжает вращаться через раз налево.
        Буду признателен за вашу помощь в решении этого вопроса, сам уже не один час провел, чтобы куб вращался по вертикали и направо, с 1 кубом все получилось, вращается по вертикали и налево — все четко, никакого поворота напрво нет, все время налево а с о 2 кубом такая вот проблема…

        Да и еще повторюсь, текст или изображения на гранях не должны быть повернуты, как в примере 1 куба — вращается и текст под углом 0, т.е все нормально.
        Буду ожидать вашего решения и заранее благодарен.

        • Что такое куб в нашем понимании: это объёмный шестигранник. Что такое куб в понимании браузера: это шесть граней, наложенных друг на друга, или одна грань.
          То, что мы применяем трансформации и делаем куб объёмным, не делает из него такой на самом деле. То есть в коде страницы его суть не меняется. Поэтому для такого плоского куба доступны всего четыре движения: два раза повернуть по горизонтали и два раза повернуть по вертикали. Поэтому кадров в такой анимации может быть только 4 и только 4 грани будут показаны. http://codepen.io/html5book/pen/ameeMV.
          Перспективу не убирайте, тем более для маленьких элементов. Иначе нет смысла в таких преобразованиях, можно сделать что-то типа мини-слайдера со сменой шести картинок путём выцветания.

          • Алексей

            Здравствуйте, Елена.
            1. да сейчас куб вращается все время по вертикали и направо, но текст по прежнему остается повернут (:
            2. В моем примере куб вращается и видны все его грани, т.е 6. У меня используются изображения, так вот я их все вижу, а у вас в примере я согласен видны только 4 грани…
            3. Специально для демонстрации удалил у себя изображения, и вместо них написал 1,2,3,4,5,6 и показываются все последовательно, т.е сначала 1, потом 2,3,4,5 и 6 и снова повтор. Все строго — по вертикали и налево, все грани четко следуют друг за другом, вы можете это посмотреть в 1 коде который я предоставил, там меня все устраивает, да нет перспективы — добавил + тень.
            4. Нужно тоже самое, только чтобы вращение по горизонтали было не налево, а направо.
            5. Если будет у вас время попробуйте еще поэкспериментировать с кодом который я дал 1 раз, может у вас и получится, у меня пока не получается к сожалению…
            6. Ваши примеры тоже рабочие, но к сожалению не совсем подходят для моей задачи.
            7. Заранее благодарен.

          • Здравствуйте, Алексей. Текст я просто не поворачивала. Посмотрю, что можно ещё сделать, прям головоломка какая-то.

          • Алексей

            Спасибо, Елена. Буду ожидать вашего результата. Заранее благодарен.

          • Алексей

            Здравствуйте, Елена. Получается у вас или нет ? Казалось бы изменить значения на отрицательные и куб начнет вращаться в противоположную сторону, но не так видимо все просто…

          • Здравствуйте, Алексей. Немного переделала ваш первый вариант http://codepen.io/html5book/pen/ameeMV, у вас на пятом шаге было неровное вращение. Здесь http://codepen.io/html5book/pen/PboMER уже ближе к тому, что нужно. Насколько я поняла, вращение куба зависит также от того, как повернуты сами грани куба. Поэтому можете поэкспериментировать с последним вариантом. И опять, обратите внимание, четыре шага делает как надо, а на пятом сбой. У меня нет предположений, почему так происходит, рабочих примеров с такой реализацией я не нашла.
            Вы можете сделать для левого куба вращение влево, для среднего куба вращение по вертикали, для правого куба — вращение вправо. В плане экспериментов средствами css не всегда можно реализовать задуманное.

          • Алексей

            Здравствуйте, Елена. Спасибо за ваши старания. Кстати всегда проверяю в Mozilla, а когда все работает нормально, в остальных браузерах…так вот в Моzilla все нормально, а Chrome или Opera имеется неровное вращение с 4 на 5 шаг, странно чем объясняется и как поправить, пока не знаю…
            Может у вас есть идеи, как сделать чтобы во всех браузерах вращался одинаково…
            Согласен с вами средствами css не всегда можно реализовать задуманное, но у меня есть и на js и на php, а тут решил на css и «почти получилось»…

            Почему-то себе не могу задать перспективу, на тестовом примере у вас, да и у меня на test.php все работает нормально, т.е куб 24px, perspective:150px; меня устраивает, но не понимаю пока почему у меня не работает…

            Мой css код, проверьте, где ошибка
            .cube {margin: 0 auto; position: relative; width: 800px;}
            .cubespinner_L {left: 60px;} .cubespinner_R {right: 60px;}

            .cubespinner_L, .cubespinner_R {
            -webkit-animation: spincube 10s infinite;
            -moz-animation: spincube 10s infinite;
            -o-animation: spincube 10s infinite;
            animation: spincube 10s infinite;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            -o-transform-origin: center center;
            transform-origin: center center;
            margin-top: 15px;
            height: 24px; width: 24px;
            position: absolute;
            }

            .face {
            background: rgba(255,255,255,0.5);
            border: 1px solid #bababa;
            -webkit-box-shadow: inset 0 0 5px #8ecbde, 0 0 2px #fff;
            -moz-box-shadow: inset 0 0 5px #8ecbde, 0 0 2px #fff;
            box-shadow: inset 0 0 5px #8ecbde, 0 0 2px #fff;
            color: #55dede;
            font-size: 12px;
            height: 24px;
            line-height: 24px;
            position: absolute;
            text-align: center;
            width: 24px;
            }

            .face img {padding:1px}

            .face:nth-child(1) {transform: translateZ(12px);}
            .face:nth-child(2) {transform: rotateY(90deg) translateZ(12px);}
            .face:nth-child(3) {transform: rotateY(90deg) rotateX(90deg) translateZ(12px);}
            .face:nth-child(4) {transform: rotateY(180deg) rotateZ(90deg) translateZ(12px);}
            .face:nth-child(5) {transform: rotateY(-90deg) rotateZ(90deg) translateZ(12px);}
            .face:nth-child(6) {transform: rotateX(-90deg) translateZ(12px);}

            @keyframes spincube {
            from,to {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
            16% {transform: rotateY(-90deg);}
            33% {transform: rotateY(-90deg) rotateZ(90deg);}
            50% {transform: rotateY(-180deg) rotateZ(90deg);}
            66% {transform: rotateY(-270deg) rotateX(90deg);}
            83% {transform: rotateX(90deg);}
            }

            html код:

            У меня 2 эти куба будут вращаться в футере странице, между ними копирайт сайта. Сейчас они вращаются нормально, но если я для класса .cube задаю perspective:150px; то происходит сильное искажение, хотя на пробной странице все хорошо…

            1. Вопрос насчет неправильного вращения на одном шаге для браузеров Chrome и Opera
            2. Не работает перспетива, точнее работает, но неправильно.

            Заранее благодарен.

          • Алексей

            Здравствуйте, Елена. Простите за надоедливость, но у меня к вам 2 небольших вопроса, обращаюсь к вам так как вы об этой теме знаете больше чем кто-либо, да и примеры вы уже делали.

            У меня 2 эти куба будут вращаться в футере странице, между ними копирайт сайта. Сейчас они вращаются нормально, но если я для класса .cube задаю perspective:150px; то происходит сильное искажение, хотя на пробной странице все хорошо…

            1. Вопрос насчет неправильного вращения на одном шаге для браузеров Chrome и Opera
            2. Не работает перспетива, точнее работает, но неправильно.

            Это я уже писал, но решил еще раз вдруг вы не получили предыдущее сообщение.
            С уважением, Алексей

          • Здравствуйте, Алексей.
            1) Пока не могу сказать, в чём причина, но может вас этот пример http://codepen.io/html5book/pen/GjLLgb наведёт на какие-нибудь мысли. Может попробовать содержимое граней поместить в :before?
            2) Слишком маленькое значение перспективы, попробуйте так:
            .cube {
            margin: 0 auto;
            width: 800px;
            perspective: 1000px;
            }
            .cubespinner_L {
            float: left
            }
            .cubespinner_R {
            float: right
            }
            .cubespinner_L, .cubespinner_R {
            animation: spincube 10s infinite;
            transform-style: preserve-3d;
            transform-origin: center center;
            margin-top: 15px;
            height: 24px;
            width: 24px;
            }

  • Double Rainbow

    привет всем. подскажите пожалуйста, как сделать так, чтобы анимация после воспроизведения становилась на паузу на определенное время, скажем секунд на 10, а потом снова воспроизводилась. заранее огромное спасибо!

    • привет. что-то по типу этого http://codepen.io/html5book/pen/MpQxGr, но думаю результат будет далёк от идеального, такие вещи лучше делать с помощью скрипта

      • Double Rainbow

        Спасибо Елена! у меня немного другая анимация, я прописал 1%, 2%… 5% вместо 30, 40, 50 etc. получилось именно то что хотел!

        • Пожалуйста! Значения кадров могут быть другие, а смысл вы поняли.

  • Степан Прокопяк

    Здравствуйте, как сделать такой круг? http://themes.semicolonweb.com/html/canvas/pie-skills.php