• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
    • УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS
    animation
    appearance
    backface-visibility
    background
    border
    bottom
    box
    caption-side
    clear
    clip
    color
    column
    content
    counter-increment
    counter-reset
    cursor
    direction
    display
    empty-cells
    float
    font
    grid-columns
    grid-rows
    hanging-punctuation
    height
    icon
    @keyframes
    left
    letter-spacing
    line-height
    list-style
    margin
    max-height
    max-width
    min-height
    min-width
    nav
    opacity
    outline
    overflow
    overflow-x
    overflow-y
    padding
    page-break
    perspective
    perspective-origin
    position
    punctuation-trim
    quotes
    resize
    right
    rotation
    rotation-point
    table-layout
    target
    text
    top
    transform
    transition
    vertical-align
    visibility
    width
    white-space
    word-spacing
    word-break
    word-wrap
    z-index

    CSS3 Правило @keyframes

    CSS Справочник Детальный CSS Справочник

    Пример

    Заставить элемент div постепенно двигаться вниз на 200 пикселей:

    @keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    from {top:0px;}
    to {top:200px;}
    }

    @-webkit-keyframes mymove /* Safari и Chrome */
    {
    from {top:0px;}
    to {top:200px;}
    }

    Попробуйте сами »
    Еще примеры внизу этой страницы.

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

    Internet Explorer Firefox Opera Google Chrome Safari

    Правило @keyframes не поддерживается ни одним браузером.

    Firefox поддерживает альтернативное правило @-moz-keyframes.

    Safari и Chrome поддерживают альтернативное правило @-webkit-keyframes.

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

    С помощью правила @keyframes (или правила "ключевых кадров") вы можете создавать анимации.

    Анимация создается путем постепенного изменения от одного множества CSS стилей к другому.

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

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

    0% это начало аинмации, 100% - это завершение анимации.

    Для наилучшей поддержки браузерами всегда следует определять селекторы 0% и 100%.

    Замечание: Используйте свойства анимации для управления процессом анимации, а также для привязки анимации к селекторам.

    Синтаксис

    @keyframes { название_анимации селектор-ключевого-кадра {css-стили;} }

    Значение Описание
    название_анимации Обязательно. Определяет название анимации.
    селектор-ключевого-кадра Обязателен. Указывается в процентах от продолжительности анимации.

    Допустимые значения:

    0-100%
    from (то же, что и 0%)
    to (то же, что и 100%)

    Замечание: Вы можете указывать множество селекторов ключевого кадра в одной анимации.
    css-стили Обязательны. Один или более допустимых CSS свойств стилей

    Примеры

    Попробуйте сами - Примеры

    Пример

    Добавление нескольких селекторов ключевого кадра в одной анимации:

    @keyframes mymove
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }

    @-webkit-keyframes mymove /* Safari и Chrome */
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }

    Попробуйте сами »

    Пример

    Изменение нескольких CSS стилей в одной анимации:

    @keyframes mymove
    {
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
    }

    @-webkit-keyframes mymove /* Safari и Chrome */
    {
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
    }

    Попробуйте сами »

    Пример

    Несколько селекторов ключевого кадра с несколькими CSS стилями:

    @keyframes mymove
    {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
    }

    @-webkit-keyframes mymove /* Safari и Chrome */
    {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
    }

    Попробуйте сами »

    Смотрите Также

    Уроки CSS3: CSS3 Свойства Анимации

    CSS Справочник Полный CSS Справочник



    © 2011 - 2022 Уроки CSS