Автор

30 10.2017
CSS-анимация движения

CSS-анимация движения


После того как некоторые умники полностью скопировали мой сайт (дизайн) и выставили его на продажу я решил немного улучшить его и сделать из статических картинок полную анимацию! Теперь практически на всём сайте присудствует движение и на мой взгляд сайт и особенно главная страница стали более интересным для воспиятия!

 

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Пример анимации можно посмотреть на этой странице

Как это реализовать рассмотрим ниже:

 

HTML

Ну тут всё просто и понятно:

<div class="progress"></div>

 

CSS

Сложные анимации делаются объединением простых при помощи CSS-правила @keyframes.

В нём задаётся «имя» анимации и правила: что, откуда и куда анимировать. Затем при помощи свойства animation: имя параметры эта анимация подключается к элементу, задаётся время анимации и дополнительные параметры, как её применять.


  /* Современные браузеры, кроме Chrome, Opera, Safari */
  @keyframes go-left-right {   /* назовём анимацию: "go-left-right" */
    from {
      left: 0px;               /* от: left: 0px */
    }
    to {
      left: calc(100% - 50px); /* до: left: 100%-50px */
    }
  }

  /* Префикс для Chrome, Opera, Safari */
  @-webkit-keyframes go-left-right {
    from {
      left: 0px;
    }
    to {
      left: calc(100% - 50px);
    }
  }

  .progress {
    /* применить анимацию go-left-right */
    /* продолжительность 3s */
    /* количество раз: бесконечное (infinite) */
    /* менять направление анимации каждый раз (alternate) */
    animation: go-left-right 3s infinite alternate;
    -webkit-animation: go-left-right 3s infinite alternate;

    position: relative;
    border: 2px solid green;
    width: 50px;
    height: 20px;
    background: lime;
  }

Этот стандарт пока в черновике, поэтому в Chrome, Safari, Opera нужен префикс -webkit.

CSS-анимации позволяют плавно или не очень менять одно или несколько свойств.

Пример анимации

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

04 04.2013
CSS-анимация движения

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


13 06.2014
CSS-анимация движения

Любой вебразработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).


31 03.2013
CSS-анимация движения

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


31 07.2017
CSS-анимация движения

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close