6.Управление видимостью объекта в css.

Свойство display указывает отображать ли элемент и как его отображать, а свойство visibility указывает должен ли элемент быть видимым или нет.

Чтобы спрятать элемент, необходимо установить свойство display в "none" или установить свойство visibility в "hidden". Однако, эти два метода приводят к различным результатам:

visibility:hidden прячет элемент, но он будет по прежнему занимать то же место, что и прежде. Элемент будет спрятан, но будет по-прежнему влиять на компоновку страницы.

Пример:h1.hidden {visibility:hidden;}

display:none прячет элемент так, что он не будет занимать место на странице. Элемент будет спрятан, и страница будет отображаться, как будто на ней вовсе нет этого элемента:

Пример:h1.hidden {display:none;}

7.Графика с помощью css.

С CSS3 мы можем создавать анимацию, которая может заменить анимированные изображения, Flash анимацию и скрипты JavaScript во многих случаях.

Правило @keyframes используется для создания анимации. Укажите CSS стиль внутри правила @keyframes и анимация будет воспроизводиться, плавно изменяя текущий стиль на новый.

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

Internet Explorer и Opera пока еще не поддерживают правило @keyframes и свойство animation.

Firefox требует приставки -moz-, тогда как Chrome и Safari требуют приставки -webkit-.

Пример:

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari и Chrome */

{

from {background: red;}

to {background: yellow;}

}

CSS3 свойство animation

Когда анимация создана в правиле @keyframe, привяжите ее к селектору, иначе анимация не произведет эффекта.

Привязка анимации к селектору осуществляется указанием по крайней мере двух следующих свойств CSS3 анимации:

Указание названия анимации

Указание продолжительности анимации

Пример

Привязка анимации "myfirst" к элементу div, продолжительность: 5 секунд:

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s; /* Firefox */

-webkit-animation: myfirst 5s; /* Safari и Chrome */

}

Замечание: Вы должны определить название (имя) и продолжительность анимации. Если продолжительность пропущена, анимация не запустится, так как значение по умолчанию равно 0.

Анимация - это эффект, который позволяет элементу плавно изменять один стиль на другой.

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

Укажите, когда должно произойти изменение в процентах (от общей продолжительности одного цикла), или ключевые слова "from" и "to", которые обозначают 0% и 100% соответственно.

0% - это начало анимации, 100% - это завершение (когда анимация полностью завершена).

Пример

Изменить цвет фонаи положение, когда анимация завершена на 25%, 50% и снова, когда анимация будет полностью (на 100%) завершена: @keyframes myfirst

{

0% {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

CSS3 Animation Properties

Ниже перечислены все свойства анимации:

@keyframes: определяет анимацию

Animation: стенографическое (сокращенное) свойство для всех свойств анимации, за исключением свойства animation-play-state

animation-name: указывает название анимации @keyframes 3

animation-duration: указывает, сколько секунд (миллисекунд) требуется для завершения одного полного цикла анимации. По умолчанию 0

animation-timing-function: описывает, как будет изменяться скорость проигрывания анимации в течение одного цикла. Default "ease"

animation-delay: указывает, когда начнется анимация (задержка анимации). По умолчанию 0

animation-iteration-count: указывает, сколько раз будет воспроизводиться анимация. По умолчанию один раз

animation-direction: указывает, будет или нет анимация проигрываться в обратном направлении (от конца к началу) на четных циклах воспроизведения. По умолчанию равно "normal"

animation-play-state: указывает, запущена анимация или на паузе. Значение по умолчанию "running"