КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

CSS3 Трансформации и анимации

2D-трансформации

Для задания элементу трансформации используется CSS-свойство transform, которое может принимать несколько значений, разделённых пробелами:

.transform:nth-child(1){
  transform: translate(50px, 0px) /* Сдвиг элемента по осям Х и У */ 
  scale(1.3, .9) /* Уменьшение или увеличение */
  rotate(-11deg) /* Поворот на заданный градус */
  skew(17deg, 7deg); /* Перекос по осям на заданный градус */
  /* существует ещё функция perspective() */
  perspective(500px)
}
CSS3 transformations

Из этих четырёх свойств трансформации только rotate может принимать один только параметр, для остальных один переданный параметр будет применён к обеим осям или размерам. Также можно изменять элемент с помощью указания оси (например rotateX или rotateY)
Для поддержки этих не совсем стандартных на данный момент свойств старыми браузерами используйте префиксы:

-moz-transform: rotate(15deg); /* Для Firefox */
-ms-transform: rotate(15deg); /* Для IE */
-webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
-o-transform: rotate(15deg); /* Для Opera */
transform: rotate(15deg);
Существует изящный "костыль" под названием prefix-free, этот js-скрипт просматривает все css-свойства, для которых нужен префикс и добавляет нужный. Подключаем его после всех файлов стилей и работаем без префиксов :)
Трансформация элемента никак не влияет на его окружение, это сравнимо с получением элементом релативного позиционировая.

По умолчанию трансформация выполняется относительно центра элемента, но с помощью transform-origin можно указать координаты или в текстовом виде или в доступных величинах (проценты, пикселя и т.д.)

.transform:nth-child(2){
  transform: rotate(11deg);
  transform-origin: top left; /* Относительно левого верхнего угла */
}
CSS3 transformations

3D-трансформации

Для создания трёхмерных трансформаций нужно к родительскому элементу применить свойство perspective для создания перспективы

.wrapper{
  perspective: 500px;
  width: 200px;
  height: 100px;
  margin: auto;
}
.transform3{
  transform: rotateY(33deg) rotateX(11deg) rotateZ(0deg);
}
// Вместо этих трёх свойств можно использовать запись
transform: rotate3D(1,// вращение по оси X на 40 градусов
  -2,// вращение по оси Y на -80 градусов (умножение) 
  0,// не трогаем ось Z
  40deg);
.transform4{
  transform: rotate3D(1, -1, .3, 21deg) translate(0, -33px);
}

CSS3 transformations

Анимации

Простенькие анимации можно создавать с применением свойства transition:

.trans{
  transition: all .5s;// Добавим div-у ещё один класс
}
.transform5:hover{
  transition: all 1s;
  width: 300px;
  transform: rotate3D(1, 0, 0, 33deg) scale(1.5);
}
CSS3 animation

Теперь самое вкусное - конкретно анимации..
Для создания анимации используется ключевое слово @keyframes, после которого должно идти имя анимации, например назовём её magic:

    .magic{
        animation-name: magic; /* задаёт имя анимации */
        animation-duratiion: 3s; /* длительность анимации */
        animation-timing-function: ease;
        /*
        ease - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. По умолчанию  animation-timing-function: ease.
    ease-in - Анимация медленно начинается, к концу ускоряется.
    ease-out - Анимация начинается быстро, к концу замедляется.
    ease-in-out - Анимация начинается и заканчивается медленно.
    linear - Одинаковая скорость от начала и до конца.
    step-start - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
    step-end - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
    cubic-bezier - Задаёт функцию движения в виде кривой Безье.
    */
        animation-delay: .7s; /* задержка перед началом анимации */
        animation-iteration-count: 3; /* сколько раз повторять анимацию, infinite - бесконечно */
        animation-direction: normal; /* задаёт направление анимации, reverse - анимация пойдёт в обратгом направлении, alternate - циклы будут чередоваться */
        animation-fill-mode: both; /* определяет какие стили будут применяться к анимируемому элементу до запуска анимации и после её выполнения.*/
/* animation-play-state: paused;
       или
       animation-play-state: running;  Позволяет приостанавливать или запускать анимацию */
        
       /* Для всех свойств существует сокращённая запись :))) УРА */ 
       animation: magic 3s ease .7s infinite alternate;  
        
    }
 
    @keyframes magic{
        0%{
            
        }
        50%{
            transform: scale(1.5) rotate(360deg)
        }
        100%{
            transform:rotateX(180deg);
        }
    }
    /**
    * Допускается вместо 0% и 100% использовать слова from и to, и указывать ключевые места в анимации через запятую, например 37%, 68%{
        transform: scale(2);
    }
    */

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

Play/Stop
CSS3 animation
Полезные ссылки: Animate.css, Magik.css
2016.05.18 31

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика