CSS3 анимации элемента фокус

Я строй один сайт страницы и в разделе этого сайта у меня есть CSS-анимацияCSS3 анимации элемента фокус

.animation { 
    background-color: #54a3f7; 
    -webkit-animation: html 2s ease-in-out; 
}

набор с

@-webkit-keyframes html { 
    0% { width: 0%;} 
    100% { width: 100%; } 
}

У меня есть рабочий пример здесь:

Моя проблема заключается в том, что эта анимация (конечно) начнется с загрузки окна, но я хочу, чтобы она начиналась, когда пользователь нажимает на верхнее меню и хочет, чтобы e <section id="animations"> Итак, когда пользователь нажимает «Анимация», он прокрутит вниз до этого раздела при запуске анимации

источник

2013-07-22 Morten Hagh

Вам нужно JavaScript для обработчика событий нажмите для запуска анимации. Вы знаете какой-либо JavaScript? –

попробуйте взглянуть на jQuert.animate(), это очень мощный –

Проголосовали за то, что вы приняли решение, требующее сброса 70 Кбайт пропускной способности на клиенте, а не на самом деле правильного кода. – John

Для этого вам понадобится Javascript. Вы можете добавить класс к анимации CSS при щелчке (или любом другом событии взаимодействия). Я собрал базовый JSFiddle для демонстрации:

Примечание: используется jQuery.

http://jsfiddle.net/zensign/sg9ty/1/

$('#start-btn').click(function() { 
    $('#animate-me').addClass('animation'); 
});

источник

2013-07-22 21:22:20 ezekielDFM

Sweet! Работает как удовольствие! Он настроен на фокусировку на разделе #animation. И это начинается, когда этот раздел сфокусирован. Большое спасибо! –

Ну, я бы сказал, что «правильный путь» довольно субъективен в этом сценарии. Я уверен, что бесчисленные люди, которые использовали JQuery для быстрого создания решений на протяжении многих лет, вероятно, просто слишком ленивы, чтобы написать Vanilla JS. Но так как вы эксперт, почему бы вам не пойти дальше и ответить «правильным» ответом, и, возможно, OP переработает свое решение через 2 года. Спасибо за ваш ценный вклад. – ezekielDFM

-1

что это за битва?

.animation { 
    height: 40px; 
    width: 100%; 
} 
.animation:hover { 
    background-color: #54a3f7; 
    -webkit-animation: animation 2s ease-in-out; 
    -moz-animation: animation 2s ease-in-out; 
} 

@-webkit-keyfram``es animation { 0% { width: 0%;} 100% { width: 100%; }} 
@-mox-keyframes animation { 0% { width: 0%;} 100% { width: 100%; }}

заменить это ur jsfiddle html.

источник

2013-07-22 20:44:45 user2606561

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

CSS3 анимации элемента фокус

ответ

Смежные вопросы