Как изменится css если удвоить

Как объединить два CSS класса в один?

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

если-же надо объеденить 2 класса в один, то этого достич можно так

Отслеживать
ответ дан 16 окт 2013 в 10:03
69 5 5 бронзовых знаков
@Brodobrey расширьте пожалуйста свой ответ, ничего не понятно.
16 окт 2013 в 10:27
глянь, теперь понятно?
16 окт 2013 в 10:49

По ссылке они у вас не объединены, а указаны оба. Объединить надо badge и badge-success в bs, badge и badge-important в bi.

16 окт 2013 в 11:20

Посмотрите как во втором бутстрапе сделаны иконки:

[class^="icon-"], [class*=" icon-"] < /* основные стили */ >.icon-glass < background-position: 0 0;>.icon-music < background-position: -24px 0; >.icon-search < background-position: -48px 0; >. 

У вас, видимо, будет что-то вроде:

 [class^="badge-"], [class*=" badge-"] < display: block; width: 100px; heigh: 100px; /* и другие базовые стили */ >.badge-success < backgroun-image: url(badge1.png); >.badge-important 

Может вы что-то типа этого хотите?

Но лично мне нравится вариант, который у вас изначально представлен. Да и бутстрап вот, к примеру, от таких хитростей обновился к варианту, как у вас опять же изначально. Так же ваш вариант хорошо описывается терминами БЭМ.

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

Значения свойств CSS

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

Что такое значение CSS?

Примечание: You’ll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию rgb() :

h1  color: black; background-color: rgb(197, 93, 161); > 

Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция rgb() и т.д. Вы можете воспользоваться любым доступным значением при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.

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

Числа, длины и проценты

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

Длины

Числовой тип, с которым вы будете сталкиваться чаще всего это (длина), например 10px (пиксели) или 30em . Существует два типа длин используемых в CSS — относительные и абсолютные. Важно знать разницу для того, чтобы понимать, насколько большими станут вещи.

Абсолютные единицы длины

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

Большинство из этих значений больше полезны при использовании печати, чем для вывода на экран. Например, мы обычно не используем cm (сантиметры) на экране. Единственное значение которое вы в основном будете использовать это px (пиксели).

Единицы относительной длины

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

Изучение на примере

В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет width (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.

Второй блок имеет ширину, установленную в единицах vw (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием (en-US) , поэтому это не сработает. Для того чтобы увидеть это в действии вы должны открыть этот пример в отдельной вкладке браузера.

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

em и rem

em и rem — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как стилизация текста или разметка CSS. Приведённый ниже пример показывает это.

HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс ems, а второй класс rems.

Чтобы начать, мы установили 16px для размера шрифта элемента .

Повторим, единица rem означает «размер шрифта корневого элемента» (rem значит «root em». (root — корень)). Элементы внутри с классом rems получают свои размеры от корневого элемента ( ). Это значит, что каждый последующий уровень вложения не продолжает увеличиваться.

Однако, если вы измените font-size (размер шрифта) в CSS, вы увидите что все остальное изменится относительно ему — и rem — и em -размеры текста

Проценты

Во многих случаях проценты обрабатываются таким же образом, как и длина. С процентами фишка в том, что они всегда устанавливаются относительно некоторого другого значения. Например, если вы установите font-size элемента как проценты, то это будет процент от font-size родительского элемента. Если вы используете процент для значения width (ширина), то это будет процент от width родителя.

В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.

Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.

Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.

Обратите внимание, в то время как многие значения принимают как длину, так и проценты, существуют те, которые принимают только длину. Вы можете посмотреть какие значения допустимы на справочной странице свойств MDN. Если допустимые значения включают (en-US) , тогда вы можете использовать и длину, и проценты. Если же допустимые значения включают только , то использование процентов невозможно.

Числа

Некоторые значения принимают числа без каких-либо единиц измерения. Примером свойства принимающего числа без единиц измерения может служить свойство opacity , которое контролирует мутность элемента (настолько он прозрачен). Это свойство принимает числа между 0 (полностью прозрачное) и 1 (полностью мутное).

В примере ниже, попробуйте изменить значение opacity на различные десятичные значения между 0 и 1 и посмотрите, как блок и его содержимое становится более и/или менее мутными.

Примечание: Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки.

Цвет

Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо ещё.

Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.

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

Ключевые слова цвета

Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений .

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

Шестнадцатеричные RGB значения

Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть 0123456789abcdef . Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).

Эти значения являются немного более сложными и менее простыми для понимания, но они намного более универсальны чем ключевые слова — вы можете использовать hex-значения чтобы отобразить любой цвет, который вы хотите использовать в своей цветовой схеме.

И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.

RGB и RGBA значения

Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — rgb() — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.

Давайте перепишем наш последний пример используя RGB цвета:

А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на 0 , то это сделает цвет полностью прозрачным, тогда как 1 сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.

Примечание: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства opacity которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

In this example, try changing the alpha channel values to see how it affects the color output.

Примечание: At some point modern browsers were updated so that rgba() and rgb() , and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example’s rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

HSL and HSLA values

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

• Hue: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.
• Saturation: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
• Lightness: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)

We can update the RGB example to use HSL colors like this:

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I’ve demonstrated this below by changing my RGBA example to use HSLA colors.

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

Images

The (en-US) data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

Примечание: there are some other possible values for , however these are newer and currently have poor browser support. Check out the page on MDN for the (en-US) data type if you want to read about them.

Position

The (en-US) data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position ). It can take keywords such as top , left , bottom , right , and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center .

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

Play around with these values to see how you can push the image around.

Strings and identifiers

Throughout the examples above, we’ve seen places where keywords are used as a value (for example keywords like red , black , rebeccapurple , and goldenrod ). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

Functions

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We’ve already seen functions in action in the Colors section — rgb() , hsl() , etc. The value used to return an image from a file — url() — is also a function.

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It’s particularly useful if you want to work out values that you can’t define when writing the CSS for your project, and need the browser to work out for you at runtime.

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can’t do this calculation beforehand because we don’t know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

Summary

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units (en-US) reference page; you will encounter many of these in use as you work through these lessons.

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

For example, understanding that (en-US) also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

In this module

1. Cascade and inheritance
2. CSS selectors
   • Type, class, and ID selectors
   • Attribute selectors
   • Pseudo-classes and pseudo-elements
   • Combinators
3. The box model
4. Backgrounds and borders
5. Handling different text directions
6. Overflowing content
7. Values and units
8. Sizing items in CSS
9. Images, media, and form elements
10. Styling tables
11. Debugging CSS
12. Organizing your CSS (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Использование CSS переходов

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS-свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

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

CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).

Примечание: CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.

Какие CSS-свойства анимируются?

Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств (en-US) ограничен определённым набором.

Примечание: Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.

Примечание: Значение свойства auto является сложным случаем. Спецификация не рекомендует анимировать в значение auto и из значения auto . Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с auto следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.

Примечание: Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью .appendChild() или удаления его display: none; свойства . Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение — применить window.setTimeout() c некоторым количеством миллисекунд до изменения CSS-свойства, которое вы собираетесь анимировать.

Пример анимирования нескольких свойств

HTML

body> p> К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтоб увидеть, как они анимируются p> div class="box">div> body> 

CSS

.box  border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s; transition: width 2s, height 2s, background-color 2s, transform 2s; > .box:hover  background-color: #ffcccc; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); > 

CSS-свойства, определяющие переходы

CSS переходы контролируются свойством transition . Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

Можно контролировать определённые параметры перехода следующими подсвойствами:

(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS transition s только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство animation (en-US) .)

• transition-property (en-US)
  • : Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.

  div class="parent"> div class="box">Loremdiv> div> 

  .parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; > .box1  transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; > 

  function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

  transition-duration: 1s

  div class="parent"> div class="box">Loremdiv> div> 

  .parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration: 1s; transition-timing-function: ease-in-out; > .box1  transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 1s; transition-timing-function: ease-in-out; > 

  function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

  transition-duration: 2s

  div class="parent"> div class="box">Loremdiv> div> 

  .parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 2s; transition-timing-function: ease-in-out; > .box1  transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 2s; transition-timing-function: ease-in-out; > 

  function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

  transition-duration: 4s

  div class="parent"> div class="box">Loremdiv> div> 

  .parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 4s; transition-timing-function: ease-in-out; > .box1  transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 4s; transition-timing-function: ease-in-out; > 

  function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

  

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: ease; > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: ease; > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: linear; > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: linear; > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: step-end; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: step-end; > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: step-end; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: step-end; > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: steps(4, end); transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: steps(4, end); > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: steps(4, end); transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-timing-function: steps(4, end); > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 0.5s; transition-timing-function: linear; > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 0.5s; transition-timing-function: linear; > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 1s; transition-timing-function: linear; > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 1s; transition-timing-function: linear; > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 2s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 2s; transition-timing-function: linear; > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 2s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 2s; transition-timing-function: linear; > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div class="parent"> div class="box">Loremdiv> div> 

.parent  width: 250px; height: 125px; > .box  width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 4s; transition-timing-function: ease-in-out; > .box1  width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration: 2s; -webkit-transition-delay: 4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top color; transition-duration: 2s; transition-delay: 4s; transition-timing-function: ease-in-out; > 

function updateTransition()  var el = document.querySelector("div.box"); if (el)  el.className = "box1"; > else  el = document.querySelector("div.box1"); el.className = "box"; > return el; > var intervalID = window.setInterval(updateTransition, 7000); 

div  transition:   ; > 

.addEventListener("transitionend", updateTransition, true); 

div  transition-property: opacity, left, top, height; transition-duration: 3s, 5s; > 

div  transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; > 

div  transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; > 

div  transition-property: opacity, left; transition-duration: 3s, 5s; > 

#delay1  position: relative; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; font-size: 14px; > #delay1:hover  transition-property: font-size; transition-duration: 4s; transition-delay: 2s; font-size: 36px; > 

div class="sidebar"> p>a class="menuButton" href="home">Homea>p> p>a class="menuButton" href="about">Abouta>p> p>a class="menuButton" href="contact">Contact Usa>p> p>a class="menuButton" href="links">Linksa>p> div> 

.menuButton  position: relative; transition-property: background-color, color; transition-duration: 1s; transition-timing-function: ease-out; text-align: left; background-color: grey; left: 5px; top: 5px; height: 26px; color: white; border-color: black; font-family: sans-serif; font-size: 20px; text-decoration: none; box-shadow: 2px 2px 1px black; padding: 2px 4px; border: solid 1px black; > .menuButton:hover  position: relative; transition-property: background-color, color; transition-duration: 1s; transition-timing-function: ease-out; background-color: white; color: black; box-shadow: 2px 2px 1px black; > 

p>Кликните куда-нибудь, чтобы подвинуть шарp> div id="foo">div> 

var f = document.getElementById("foo"); document.addEventListener( "click", function (ev)  f.style.transform = "translateY(" + (ev.clientY - 25) + "px)"; f.style.transform += "translateX(" + (ev.clientX - 25) + "px)"; >, false, ); 

p  padding-left: 60px; > #foo  border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; >