ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



CSS3 Demonstration. Lesson1 Transitions (Анимация)

Сообщений 1 страница 5 из 5

1

[html]<style>.transition {padding: 10px;margin: 10px 10px 10px 0;border-radius: 5px;}.notransition {background-color: #ffba00;  width: 200px;padding: 10px;border-radius: 5px;}.notransition:hover {background-color: #ff7200;} .transition1 { background-color: #ffba00;width: 200px;-webkit-transition: background-color 3s;-moz-transition: background-color 3s; -o-transition: background-color 3s; -ms-transition: background-color 3s; transition: background-color 3s;} .transition1:hover { background-color: #ff7200;} .transitiondemo5, .transitiondemo6, .transitiondemo7 {width: 500px;} .transition2 { background-color: #ffba00;width: 200px;-webkit-transition: width 3s;-moz-transition: width 3s;-o-transition: width 3s; -ms-transition: width 3s; transition: width 3s;} .transition2:hover {width: 500px;} .transition4 {background-color: #ffba00;width: 200px; color: #fff;-webkit-transition: color 5s;-moz-transition: color 5s;-o-transition: color 5s;-ms-transition: color 5s;transition: color 5s;}.transition4:hover { color: #000;}.transitiondemo5 .transition {background-color: #ffba00;width: 100px; margin-left: 0; color: #fff;-webkit-transition: color 3s, margin-left 2s, background-color 3s;-moz-transition: color 3s, margin-left 2s, background-color 3s;-o-transition: color 3s, margin-left 2s, background-color 3s; -ms-transition: color 3s, margin-left 2s, background-color 3s; transition: color 3s, margin-left 2s, background-color 3s;}.transitiondemo5:hover .transition {color: #000;background-color: #ff7200;margin-left: 400px;}.transitiondemo6 .transition61 {background-color: #ffba00;width: 100px;  -webkit-transition: width 0;-moz-transition: width 0s;-o-transition: width 0;-ms-transition: width 0; transition: width 0;}.transitiondemo6 .transition62 {background-color: #ffba00; width: 100px;-webkit-transition: width 2s;-moz-transition: width 2s; -o-transition: width 2s;-ms-transition: width 2s;transition: width 2s;}.transitiondemo6 .transition63 { background-color: #ffba00;width: 100px;-webkit-transition: width 4s;-moz-transition: width 4s;-o-transition: width 4s;-ms-transition: width 4s;transition: width 4s;}.transitiondemo6 .transition64 {background-color: #ffba00;width: 100px; -webkit-transition: width 6s;-moz-transition: width 6s; -o-transition: width 6s; -ms-transition: width 6s;transition: width 4s;}.transitiondemo6:hover .transition {width: 500px;}.transitiondemo7 .transition71 { background-color: #ffba00; width: 100px;-webkit-transition: width ease 4s;-moz-transition: width ease 4s;-o-transition: width ease 4s;-ms-transition: width ease 4s; transition: width ease 4s;}.transitiondemo7 .transition72 {background-color: #ffba00;width: 100px;-webkit-transition: width linear 4s; -moz-transition: width linear 4s;o-transition: width linear 4s;-ms-transition: width linear 4s;transition: width linear 4s; }.transitiondemo7 .transition73 {background-color: #ffba00; width: 100px;-webkit-transition: width ease-in 4s;-moz-transition: width ease-in 4s;-o-transition: width ease-in 4s;-ms-transition: width ease-in 4s;transition: width ease-in 4s; }.transitiondemo7 .transition74 {background-color: #ffba00;width: 100px;-webkit-transition: width ease-out 4s; -moz-transition: width ease-out 4s; -o-transition: width ease-out 4s; -ms-transition: width ease-out 4s;transition: width ease-out 4s;}.transitiondemo7 .transition75 {background-color: #ffba00;width: 100px; -webkit-transition: width ease-in-out 4s;-moz-transition: width ease-in-out 4s;-o-transition: width ease-in-out 4s;-ms-transition: width ease-in-out 4s; transition: width ease-in-out 4s;}.transitiondemo7:hover .transition { width: 500px;}.transitiondemo8 .transition81 { background-color: #ffba00; width: 100px;-webkit-transition: width ease 4s;-moz-transition: width ease 4s;-o-transition: width ease 4s;-ms-transition: width ease 4s; transition: width ease 4s;}.transitiondemo8 .transition82 {background-color: #ffba00;width: 100px;-webkit-transition: width 4s ease 2s; -moz-transition: width 4s ease 2s;o-transition: width 4s ease 2s;-ms-transition: width 4s ease 2s;transition: width 4s ease 2s; }.transitiondemo8 .transition83 {background-color: #ffba00; width: 100px;-webkit-transition: width 4s ease -2s;-moz-transition: width 4s ease -2s;-o-transition: width 4s ease -2s;-ms-transition: width 4s ease -2s;transition: width 4s ease -2s; }.transitiondemo8:hover .transition {width: 500px;}</style>[/html]

Изучая CSS. Демонстрация CSS3. Что и как?

Свойства CSS3 уже прочно вошли в жизнь верстальщиков, web-разработчиков и других людей, тесно связанных с web. Вошли задолго до того, как будут официально рекомендованы в качестве стандарта. Думаю, многие сталкивались и использовали в своих проектах border-radius, box-shadow, border-image и другие свойства, которые на данный момент лучше поддерживаются браузерами и проще в использовании.
В этой статье, я хочу продемонстрировать другие свойства из CSS3 и показать как ими пользоваться, а также некоторые хитрости, на которые способны CSS благодаря новым свойствам  :mybb:
Начнем... нет, не с самого легкого, а с самого интересного, на мой взгляд. Это возможности CSS3 для создания эффекта анимации.

CSS3 Transitions


Свойство transition (переход), пожалуй, одно из самых интересных в новом стандарте, позволяющих сделать множество интересных анимированных эффектов. Рассмотрим для начала вот такой пример.
Допустим, мы хотим изменить цвет фона элемента по наведению курсора (псевдокласс :hover). Что мы можем сделать с помощью CSS 2.1? Что-то в этом духе:
[html]<div class="notransition">Пример 1</div>[/html]
Неплохо и своего мы добились, но что можно сделать с помощью CSS3? Посмотрим...
[html]<div class="transition transition1">Пример 2</div>[/html]
Интереснее, правда? Посмотрим, как это работает.

Transition имеет 4 отдельных свойства:
transition-property
transition-duration
transition-timing-function
transition-delay

transition-property (свойство) указывает на то css-свойство, которое будет изменяться путем перехода.

Синтаксис:

Код:
transition-property: none | all | [ < IDENT > ] [, < IDENT > ]*

none - ни одно свойство не будет использовать переход;
all - все свойства будут использователь переход;
< IDENT > - (идентификатор) ключевое слово конкретного свойства (background-color, color, margin  и т.п.). Может быть больше одного.

В примере выше мы экспериментировали со свойством background-color. Посмотрим как будут работать другие свойства.
[html]<div class="transition transition2">Width from 200px to 500px</div><div class="transition transition4">Color from #fff to #000</div><div class="transitiondemo3"><style>.transitiondemo3 {width: 500px;}.transitiondemo3 .transition { background-color: #ffba00;width: 100px; margin-left: 0;-webkit-transition: margin-left 2s; -moz-transition: margin-left 2s;-o-transition: margin-left 2s; -ms-transition: margin-left 2s;transition: margin-left 2s;}.transitiondemo3:hover .transition {margin-left: 400px;}</style><div class="transition transition3">Margin-left from 0 to 400px</div></div>[/html]
Неплохо правда? Есть где развернуться фантазии :) Все свойства, которые поддерживают переходы описаны в спецификации.
Но это еще не все, подвергнуть анимации можно сразу несколько свойств, для этого досточно написать свойства через запятую. Давайте объединим описанные выше color, background-color и margin-left:

Код:
transition-property: backround-color, color, margin-left

[html]<div class="transitiondemo5"><div class="transition">Пример 3</div></div>[/html]

transition-duration (длительность) указывает с какой скоростью будет происходить переход.

Синтаксис:

Код:
transition-duration: < time > [, < time >]*

time - (время) время в секундах (s) или миллисекундах (ms). Может буть указано несколько раз (для каждого из свойств, указанных в transition-property).
Если это свойство не задано, то будет использоваться значение по умолчанию - 0, т.е. переход будет осуществлять мгновенно.

Поэкспериментируем:
[html] <div class="transitiondemo6"> <div class="transition transition61">0s</div><div class="transition transition62">2s</div><div class="transition transition63">4s</div><div class="transition transition64">6s</div></div>[/html]

transition-timing-function (временная/скоростная функция) указывает как будет происходить переход.

Синтаксис:

Код:
transition-timing-function: < timing-function > [, < timing-function >]*

где

Код:
< timing-function > = ease | linear | ease-in | ease-out | ease-in-out

or

Код:
< timing-function > = cubic-bezier(< number >, < number >, < number >, < number >)

< timing-function > - функция, которая определяет каким образом будет осуществляться переход (представляет собой кубическую кривую Безье). Возможно задать несколько значений через запятую (для каждого из свойств, указанных в transition-property. Может задаваться ключевыми словами (первый случай) и напрямую (второй случай).
    Не вдаваясь в подробности, что такое кривая Безье и зачем она нужна, рассмотрим ключевые слова:
ease -  переход начинается медленно, затем ускоряется, затем снова замедляется (используется по умолчанию, т.е. если Вы эту функцию не зададите).
linear - переход с одинаковой скоростью от начала и до конца.
ease-in - переход с замедленным началом.
ease-out - переход с замедленным концом.
ease-in-out - переход с замедленным началом и концом.
   
Проведем эксперимент =)
[html]<div class="transitiondemo7"><div class="transition transition71">ease</div><div class="transition transition72">linear</div><div class="transition transition73">ease-in</div><div class="transition transition74">ease-out</div><div class="transition transition75">ease-in-out</div></div>[/html]

transition-delay (задержка) - указывает с какой задержкой будет происходить переход (можно задать задержку анимации или сделать несколько эффектов последовательными).

Синтаксис:

Код:
transition-delay: < time > [, < time >]*

time - (время) время в секундах (s) или миллисекундах (ms). Может буть указано несколько раз (для каждого из свойств, указанных в transition-property).
Если указать отрицательное значение, то анимация начнется не сначала (см. пример).
[html]<div class="transitiondemo8"> <div class="transition transition81">delay 0s</div><div class="transition transition82">delay 2s</div><div class="transition transition83">delay -2s</div></div>[/html]

Сокращенная запись свойства Transition.
Кроме того, свойство transition можно записывать сокращенно, объединяя все 4 отдельных свойства: transition-property, transition-duration, transition-timing-function, transition-delay (как background объединяет в себе background-color, background-image и т.п.)

Синтаксис:

Код:
transition: <transition> [, <transition>]*

Если Вы хотите задать несколько групп свойств одновременно, то они задаются через запятую (группа 1, группа2, группа3)
В свою очередь свойства в группе задаются в следующем порядке:

Код:
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

Примеры

Пример I.
[html]<div class="notransition">Пример 1</div><div class="transition transition1">Пример 2</div>[/html]

Код:

Код:
.notransition {
background-color: #ffba00;  
width: 200px;
padding: 10px;
border-radius: 5px;
}
.notransition:hover {
background-color: #ff7200;
}
.transition1 {
padding: 10px;
border-radius: 5px; 
width: 200px;
background-color: #ffba00;
-webkit-transition: background-color 3s;
-moz-transition: background-color 3s; 
-o-transition: background-color 3s; 
-ms-transition: background-color 3s; 
transition: background-color 3s;
}
.transition1:hover { 
background-color: #ff7200;
}

Пример II.
[html]<div class="transition transition2">Width from 200px to 500px</div>[/html]
Код:

Код:
.transition2 { 
background-color: #ffba00;
width: 200px;
-webkit-transition: width 3s;
-moz-transition: width 3s;
-o-transition: width 3s; 
-ms-transition: width 3s; 
transition: width 3s;
} 
.transition2:hover {
width: 500px;
}

Пример III.
[html]<div class="transitiondemo3"><div class="transition transition3">Margin-left from 0 to 400px</div></div>[/html]
Код:

Код:
.transitiondemo3 {
width: 500px;
}
.transitiondemo3 .transition { 
background-color: #ffba00;
width: 100px; 
margin-left: 0;
-webkit-transition: margin-left 2s;
-moz-transition: margin-left 2s;
-o-transition: margin-left 2s; 
-ms-transition: margin-left 2s;
transition: margin-left 2s;
}
.transitiondemo3:hover .transition {
margin-left: 400px;
}

Пример IV.
[html]<div class="transition transition4">Color from #fff to #000</div>[/html]
Код:

Код:
.transition4 {
background-color: #ffba00;
width: 200px; 
color: #fff;
-webkit-transition: color 5s;
-moz-transition: color 5s;
-o-transition: color 5s;
-ms-transition: color 5s;
transition: color 5s;
}
.transition4:hover { 
color: #000;
}

Пример V.
[html]<div class="transitiondemo5"><div class="transition">Пример 3</div></div>[/html]
Код:

Код:
.transitiondemo5 .transition {
background-color: #ffba00;
width: 100px;
margin-left: 0; 
color: #fff;
-webkit-transition: color 3s, margin-left 2s, background-color 3s;
-moz-transition: color 3s, margin-left 2s, background-color 3s;
-o-transition: color 3s, margin-left 2s, background-color 3s; 
-ms-transition: color 3s, margin-left 2s, background-color 3s; 
transition: color 3s, margin-left 2s, background-color 3s;
}.transitiondemo5:hover .transition {
color: #000;
background-color: #ff7200;
margin-left: 400px;
}

Пример VI.
[html] <div class="transitiondemo6"> <div class="transition transition61">0s</div><div class="transition transition62">2s</div><div class="transition transition63">4s</div><div class="transition transition64">6s</div></div>[/html]
Код:

Код:
.transitiondemo6 .transition61 {
background-color: #ffba00;
width: 100px;  
-webkit-transition: width 0;
-moz-transition: width 0s;
-o-transition: width 0;
-ms-transition: width 0; 
transition: width 0;
}
.transitiondemo6 .transition62 {
background-color: #ffba00; 
width: 100px;
-webkit-transition: width 2s;
-moz-transition: width 2s; 
-o-transition: width 2s;
-ms-transition: width 2s;
transition: width 2s;
}
.transitiondemo6 .transition63 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width 4s;
-moz-transition: width 4s;
-o-transition: width 4s;
-ms-transition: width 4s;
transition: width 4s;
}
.transitiondemo6 .transition64 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width 6s;
-moz-transition: width 6s; 
-o-transition: width 6s; 
-ms-transition: width 6s;
transition: width 4s;
}
.transitiondemo6:hover .transition {
width: 500px;
}

Пример VII.
[html]<div class="transitiondemo7"><div class="transition transition71">ease</div><div class="transition transition72">linear</div><div class="transition transition73">ease-in</div><div class="transition transition74">ease-out</div><div class="transition transition75">ease-in-out</div></div>[/html]
Код:

Код:
.transitiondemo7 .transition71 { 
background-color: #ffba00; 
width: 100px;
-webkit-transition: width ease 4s;
-moz-transition: width ease 4s;
-o-transition: width ease 4s;
-ms-transition: width ease 4s;
 transition: width ease 4s;
}
.transitiondemo7 .transition72 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width linear 4s; 
-moz-transition: width linear 4s;
-o-transition: width linear 4s;
-ms-transition: width linear 4s;
transition: width linear 4s; 
}
.transitiondemo7 .transition73 {
background-color: #ffba00; 
width: 100px;
-webkit-transition: width ease-in 4s;
-moz-transition: width ease-in 4s;
-o-transition: width ease-in 4s;
-ms-transition: width ease-in 4s;
transition: width ease-in 4s; 
}
.transitiondemo7 .transition74 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width ease-out 4s;
-moz-transition: width ease-out 4s; 
-o-transition: width ease-out 4s; 
-ms-transition: width ease-out 4s;
transition: width ease-out 4s;
}
.transitiondemo7 .transition75 {
background-color: #ffba00;
width: 100px; 
-webkit-transition: width ease-in-out 4s;
-moz-transition: width ease-in-out 4s;
-o-transition: width ease-in-out 4s;
-ms-transition: width ease-in-out 4s; 
transition: width ease-in-out 4s;
}
.transitiondemo7:hover .transition { 
width: 500px;
}

Пример VIII.
[html]<div class="transitiondemo8"> <div class="transition transition81">delay 0s</div><div class="transition transition82">delay 2s</div><div class="transition transition83">delay -2s</div></div>[/html]
Код:

Код:
.transitiondemo8 .transition81 { 
background-color: #ffba00; 
width: 100px;
-webkit-transition: width ease 4s;
-moz-transition: width ease 4s;
-o-transition: width ease 4s;
-ms-transition: width ease 4s; 
transition: width ease 4s;
}
.transitiondemo8 .transition82 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width 4s ease 2s; 
-moz-transition: width 4s ease 2s;
-o-transition: width 4s ease 2s;
-ms-transition: width 4s ease 2s;
transition: width 4s ease 2s; 
}
.transitiondemo8 .transition83 {
background-color: #ffba00; 
width: 100px;
-webkit-transition: width 4s ease -2s;
-moz-transition: width 4s ease -2s;
-o-transition: width 4s ease -2s;
-ms-transition: width 4s ease -2s;
transition: width 4s ease -2s; 
}
.transitiondemo8:hover .transition,
width: 500px;
}

Бонусный пример
[html]<style>div.exampletransitione {width: 500px;height: 60px;margin: 20px 0;}div.exampletransitione div.transition {width: 20px;height: 20px;background-color: #ED8029;color: #fff;padding: 10px;border-radius: 5px;margin-left: 0;-webkit-transition: 3s linear;-moz-transition: 3s linear;
-o-transition: 3s linear;-ms-transition: 3s linear;transition: 3s linear;}div.exampletransitione:hover div.transition {width: 50px;height: 50px;margin-left: 400px;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);-moz-box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888;box-shadow: -5px -5px 5px #888;} </style><div class="exampletransitione"><div class="transition">...</div></div>[/html]
Код:

Код:
div.exampletransitione {
width: 500px;
height: 60px;
margin: 20px 0;
}
div.exampletransitione div.transition {
width: 20px;
height: 20px;
background-color: #ED8029;
color: #fff;
padding: 10px;
border-radius: 5px;
margin-left: 0;
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
div.exampletransitione:hover div.transition {
width: 50px;
height: 50px;
margin-left: 400px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Отредактировано Герда (18.07.2020 12:53:12)

+7

2

Как интересно, большое спасибо за статью. Пойду тыкать и пробовать.

0

3

Бу
экспериментируйте.

Можете оставлять ссылки на страницы/сайты, где Вы использовали эффекты transitions - интересные и необычные примеры я включу в статью с Вашим ником и ссылкой на сайт :)

0

4

sadhaka
у меня такой вопрос пусть я нуб, но спрошу

я, например, хочу на отдельной странице создать как на примере 6 кнопочек
в какие теги мне их заключать?
всмысле вот в такую страничку http://odeon.mybb.ru/pages/baneri

0

5

Nikodima
Смотря какой эффект Вы хотите. И какие 6 кнопочек :) Вообще в большинстве случаев используем <div> и  transition по onhover, например:

html:

<div class="transition">Some text</div>

css:

.transition {/*Здесь описываются изначальные свойства и переход*/}
.transition:hover {/*Здесь описываются конечные свойства*/}

Вместо дива может быть любой другой блочный элемент (ну или строковый, но не забывать его особенностей).
Если как в примере 6 или 7, по наведению сразу несколько объектов изменяется по-разному, то структура будет чуть сложнее.

html:

<div class="transitionwrap">
    <div class="trans1"></div>
    <div class="trans2"></div>
    <div class="trans3"></div>
</div>

css:

.transitionwrap trans1 {/*Здесь описываются изначальные свойства и переход*/}
.transitionwrap trans2 {/*Здесь описываются изначальные свойства и переход*/}
.transitionwrap trans3 {/*Здесь описываются изначальные свойства и переход*/}
.transitionwrap:hover trans1 {/*Здесь описываются конечные свойства*/}

+1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."