Могу ли я применить анимацию к полям?

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

У меня на самом деле есть 3 анимации. 1 для простого начального fadeIn при начальной загрузке, затем 2 других для анимации margin при щелчке. Я также только что попробовал margin вместо верха и низа, но все еще не было никаких признаков того, что это работает.

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

$(".section").click(function() {
    $(this).toggleClass("open");
});
body{
    background: #f1f1f1;
}

.section{
    display: block;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
    margin: 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
</div>

Ответы

Ответ 1

Для этого вам не нужны ключевые кадры: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

Вам нужно добавить свойство перехода к базовому элементу, который вы хотите оживить.

Вы также упомянули, что хотите изменить непрозрачность, но я не вижу, как это возможно, учитывая, что у вас есть только один элемент без детей. Я имею в виду: вы не можете нажимать на элемент, если он скрыт.

Однако вы можете добавить непрозрачность для всего: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Или даже красивее, с преобразованием:

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section {
    margin: 0;
    opacity: 0.7;
    transform: scale(0.85);
    transition: all 700ms;
}
.section.open {
    margin: 20px 0;
    opacity: 1;
    transform: scale(1);
}

В одном комментарии вы хотите затухать в элементах загрузки страницы. Мы можем сделать это, добавив класс init.

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS

С ключевыми кадрами: http://jsfiddle.net/BramVanroy/ybh0thp9/14/

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

-webkit-animation: fadeIn 1.5s ease;    
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;

Ответ 2

Для создания анимации с CSS3 вам необходимо:

  1. Создать класс с атрибутом анимации; для работы в некоторых браузерах нужно поставить префиксы: -webkit-, -o-, -moz-.
  2. Создание анимации ключевых кадров

посмотрите пример:

.animate{
    animation: myAnimation 10s; 
    animation-direction: alternate;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-timing-function: 1;
    animation-direction: alternate;

    -webkit-animation: myAnimation 10s;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    -webkit-animation-timing-function: 1;
    -webkit-animation-direction: alternate;

    -moz-animation: myAnimation 10s;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 0;
    -moz-animation-timing-function: 1;
    -moz-animation-direction: alternate;

    -o-animation: myAnimation 10s;
    -o-animation-direction: alternate;
    -o-animation-play-state: running;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 0;
    -o-animation-timing-function: 1;
    -o-animation-direction: alternate;
}

    @keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 50px}
        25%     { margin-top: 100px; margin-left: 50px }
        50%     { margin-top: 0; margin-left: 50px }
        75%     { margin-top: 100px; margin-left: 50px }
        100%    { margin-top: 0; margin-left: 50px }
    }
    @-webkit-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-moz-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-o-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }

Ответ 3

Убедитесь, что вы не устанавливаете два перехода для разных свойств, как это:

transition: margin 1000ms ease-in-out;
transition: box-shadow 1000ms ease-in-out;

box-shadow будет анимирован, но margin полностью игнорируется.

Это будет очевидно в ваших инструментах отладки браузера, потому что это будет выглядеть так:

enter image description here

Правильный путь:

transition: margin 1000ms ease-in-out, box-shadow 1000ms ease-in-out;