Видео: CSS Анимация картинки при наведении / работаем с :before и :after 2024
Получение анимации CSS3 сразу же может быть затруднено. Каждый разработчик имеет разные навыки и способы просмотра задач. Stylie предназначен для разработчиков, которые более ориентированы на визуальную ориентацию. Вы выбираете начальную и конечную точку анимации, используя значения X и Y.
Значение R определяет величину вращения, которую выполняет анимированный объект. Вы можете выбрать продолжительность анимации с использованием значений времени. Кроме того, значения X, Y и R могут иметь связанный с ними эффект анимации.
Многие анимации перемещаются в нескольких направлениях. Щелкните знак плюса (+), чтобы добавить другое направление. Это направление также имеет значения X, Y и R, а также вы можете установить его продолжительность и специальные эффекты. Короче говоря, вы можете использовать этот интерфейс для создания невероятно сложных эффектов анимации, которые идут в нескольких направлениях.
Вкладка Motion определяет характеристики анимации, например, сколько раз вы хотите, чтобы анимация выполнялась (вы можете сделать выполнение бесконечным циклом) и как объект, который вы анимации, должен взаимодействовать с траекторией анимации.
Это также вкладка, которую вы используете для определения ослабления, используемого для плавного перехода анимированного эффекта. Анимация с прямой линией проста, но ослабление становится важным, когда вы начинаете работать с анимациями, которые перемещаются в нескольких направлениях.
После того как вы закончили настройку своей анимации, вы щелкаете по вкладке CSS, которая содержит CSS, который вы используете для создания анимированного эффекта в вашем приложении. Вкладка CSS позволяет выбрать имя для класса анимации. Вы также можете выбрать, какие поставщики должны включать как часть CSS, так и уровень качества анимации.
Вкладка HTML содержит образцы тегов, необходимые для завершения анимации. Здесь вам нужно будет внести изменения, чтобы включить объект, который вы хотите оживить, вместо простого круга, предоставленного Stylie.
