Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.03.2019, 11:29
Интересующийся
Отправить личное сообщение для darktowerk56c Посмотреть профиль Найти все сообщения от darktowerk56c
 
Регистрация: 08.03.2019
Сообщений: 10

Как правильно сделать анимацию на css?
Ребята, подскажите? пожалуйста, как правильно сделать анимацию на css?
Я закомментировал свойство animation, продемонстрировав в исходных цветах идею анимации. Плавное увеличение снизу вверх (infinite)
https://codepen.io/darktowerk56c/pen/WmjZOq
Ответить с цитированием
  #2 (permalink)  
Старый 02.05.2019, 14:15
Аватар для KirilLevko
Новичок на форуме
Отправить личное сообщение для KirilLevko Посмотреть профиль Найти все сообщения от KirilLevko
 
Регистрация: 02.05.2019
Сообщений: 2

CSS-анимации
Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.
CSS transitions
Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.
Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color.
.animated {
transition-property: background-color;
transition-duration: 3s;
}
Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.
При клике на эту кнопку происходит анимация её фона:
<button id="color">Кликни меня</button>
<style>
#color {
transition-property: background-color;
transition-duration: 3s;
}
</style>
<script>
color.onclick = function() {
this.style.backgroundColor = 'red';
}
</script>
Есть всего 5 свойств, задающих анимацию:

transition-property
transition-duration
transition-timing-function
transition-delay
Далее мы изучим их все, пока лишь заметим, что общее свойство transition может перечислять их все, в порядке: property duration timing-function delay, а также задавать анимацию нескольких свойств сразу.

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:






<button id="growing">Кликни меня</button>

<style>
#growing {
transition: font-size 3s, color 2s;
}
</style>

<script>
growing.onclick = function() {
this.style.fontSize='36px';
this.style.color='red';
}
</script>
transition-property
Список свойств, которые будут анимироваться, например: left, margin-left, height, color.
Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».
transition-duration
Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms.
transition-delay
Задержка до анимации. Например, если transition-delay: 1s, то анимация начнётся через 1 секунду после смены свойства.
Возможны отрицательные значения, при этом анимация начнётся с середины.
Она осуществляется сменой margin-left у элемента с цифрами, примерно так:
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
}
В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:
digit.classList.add('animate');
Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay.
transition-timing-function
Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.
Самое сложное, но при небольшом изучении – вполне очевидное свойство.
У него есть два основных вида значения: кривая Безье и по шагам.
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2019, 11:02
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 480

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
@font-face { font-family: Cactus; font-style: normal; font-weight: 400; src: url(https://www.fontrepo.com/font/3008/cactus-cuties.ttf) format('truetype'); }
    #header { width: 960px; border: 1px solid #a9a9a9; border-radius: 15px/12px; display: flex; justify-content: space-between; width: 100%; height: auto; }
    #header_left { width: 760px; border: 1px solid #a9a9a9; border-radius: 15px/12px; margin-bottom: 0; flex: 0 1 785px; }
    #box-logo { position: relative; top: 51.5px; }
    #C_f, #a_f, #c_f, #t_f, #u_f, #s_f, #C, #a, #c, #t, #u, #s { font-family: Cactus; font-weight: 700; font-size: 100px; }
    #C, #a, #c, #t, #u, #s { color: hsl(120,100%,30%); display: inline-block; text-shadow: 3px 3px hsl(120,100%,20%), 3px -3px hsl(120,100%,20%), -3px 3px hsl(120,100%,20%), -3px -3px hsl(120,100%,20%), 3px 0 hsl(120,100%,20%), 0 3px hsl(120,100%,20%), -3px 0 hsl(120,100%,20%), 0 -3px hsl(120,100%,20%); }
#C_f { position: absolute; left: 55px; } #a_f { position: absolute; left: 167px; } #c_f { position: absolute; left: 291px; } #t_f { position: absolute; left: 403px; } #u_f { position: absolute; left: 515px; } #s_f { position: absolute; left: 634px; }
#C { position: absolute; left: 795px; } #a { position: absolute; left: 907px; } #c { position: absolute; left: 1031px; } #t { position: absolute; left: 1143px; } #u { position: absolute; left: 1255px; } #s { position: absolute; left: 1374px; }
#C_f, #a_f, #c_f, #t_f, #u_f, #s_f { color: hsl(120,30%,90%); opacity: 0.3; text-shadow: 3px 3px hsl(120, 20%,50%), 3px -3px hsl(120, 20%,50%), -3px 3px hsl(120, 20%,50%), -3px -3px hsl(120, 20%,50%), 3px 0 hsl(120, 20%,50%), 0 3px hsl(120, 20%,50%), -3px 0 hsl(120, 20%,50%), 0 -3px hsl(120, 20%,50%); }
@-webkit-keyframes motion_C { 0% { position: absolute; left: 795px; } 99.9% { position: absolute; left: 55px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 55px; -webkit-transform: rotate(0deg); } } 
@-webkit-keyframes vibration_C { 0% { position: absolute; left: 55px; bottom: 0px; } 3.85% { position: absolute; left: 55px; bottom: 65px; } 7.7% { position: absolute; left: 55px; bottom: -60px; } 11.55% { position: absolute; left: 55px; bottom: 60px; } 15.4% { position: absolute; left: 55px; bottom: -55px; } 19.25% { position: absolute; left: 55px; bottom: 55px; } 23.1% { position: absolute; left: 55px; bottom: -50px; } 26.95% { position: absolute; left: 55px; bottom: 50px; } 30.8% { position: absolute; left: 55px; bottom: -45px; } 34.65% { position: absolute; left: 55px; bottom: 45px; } 38.5% { position: absolute; left: 55px; bottom: -40px; } 42.35% { position: absolute; left: 55px; bottom: 40px; } 46.2% { position: absolute; left: 55px; bottom: -35px; } 50.05% { position: absolute; left: 55px; bottom: 35px; } 53.9% { position: absolute; left: 55px; bottom: -30px; } 57.75% { position: absolute; left: 55px; bottom: 30px; } 61.6% { position: absolute; left: 55px; bottom: -25px; } 65.45% { position: absolute; left: 55px; bottom: 25px; } 69.3% { position: absolute; left: 55px; bottom: -20px; } 73.15% { position: absolute; left: 55px; bottom: 20px; } 77% { position: absolute; left: 55px; bottom: -15px; } 80.85% { position: absolute; left: 55px; bottom: 15px; } 84.7% { position: absolute; left: 55px; bottom: -10px; } 88.55% { position: absolute; left: 55px; bottom: 10px; } 92.4% { position: absolute; left: 55px; bottom: -5px; } 96.25% { position: absolute; left: 55px; bottom: 5px; } 100% { position: absolute; left: 55px; bottom: 0px; } } 
@-webkit-keyframes pulsare { 0% {  } } #C { position: absolute; left: 795px; bottom: 0; -webkit-animation: motion_C 0.9s linear 0s 1 normal forwards, vibration_C 0.7s linear 0.9s normal forwards, text-pulsare 2.4s linear 8.05s infinite; }

@-webkit-keyframes motion_a { 0% { position: absolute; left: 907px; } 99.9% { position: absolute; left: 167px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 167px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_a { 0% { position: absolute; left: 167px; bottom: 0px; } 100% { position: absolute; left: 167px; bottom: 0px; } } @-webkit-keyframes pulsare {  } #a { position: absolute; left: 907px; -webkit-animation: motion_a 0.9s linear 0.9s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_c { 0% { position: absolute; left: 1031px; } 99.9% { position: absolute; left: 291px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 291px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_c { 0% { position: absolute; left: 291px; bottom: 0px; } 100% { position: absolute; left: 291px; bottom: 0px; } } @-webkit-keyframes pulsare {  } } #c { position: absolute; left: 1031px; -webkit-animation: motion_c 0.9s linear 1.8s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_t { 0% { position: absolute; left: 1143px; } 99.9% { position: absolute; left: 403px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 403px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_t { 0% { position: absolute; left: 403px; bottom: 0px; } 100% { position: absolute; left: 403px; bottom: 0px; } } @-webkit-keyframes pulsare { 0% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } 100% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } } #t { position: absolute; left: 1143px; -webkit-animation: motion_t 0.9s linear 2.7s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_u { 0% { position: absolute; left: 1255px; } 99.9% { position: absolute; left: 515px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 515px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_u { 0% { position: absolute; left: 515px; bottom: 0px; } 100% { position: absolute; left: 515px; bottom: 0px; } } @-webkit-keyframes pulsare { 0% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } 100% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } } #u { position: absolute; left: 1255px; -webkit-animation: motion_u 0.9s linear 3.6s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_s { 0% { position: absolute; left: 1374px; } 99.9% { position: absolute; left: 634px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 634px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_s { 0% { position: absolute; left: 634px; bottom: 0px; } 100% { position: absolute; left: 634px; bottom: 0px; } } @-webkit-keyframes pulsare { 0% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } 100% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } } #s { position: absolute; left: 1374px; -webkit-animation: motion_s 0.9s linear 4.5s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
    #block_time-data {border: 1px solid #a9a9a9; border-radius: 15px/12px; margin: 0 0 0 5px; flex: 0 1 auto; }
    #header-time { width: 150px; height: 37px; padding: 0px; background: ; color: hsl(120,100%,25%); text-align: center; font-family: 'Baumans', cursive; font-size: 30px; font-weight: bold; white-space: nowrap; border: 1px solid #a9a9a9; border-radius: 15px/12px; }
    #header-date { width: 150px; padding: 0px; color: hsl(120,100%,25%); font-family: 'Baumans', cursive; font-weight: bold; font-size: 18px; height: 182px; margin-bottom: 0; border: 1px solid #a9a9a9; border-radius: 15px/12px; }
      #header_day { padding: 0px; font: bold 18px serif; }
      #header_date { padding: 0px; font-family: 'Baumans', cursive; font-weight: bold; font-size: 48px; }
      #header_month { padding: 0px; font: bold 18px serif; }
      #header_year { padding: 0px; font: bold 18px serif; }
      #link-calendar { padding: 0px; font-weight: normal; font-size: 10px; font-family; serif; margin-bottom: 0; }
      #link-calendar { color: hsl(210,100%,40%); }
      div {
        font: 14px serif;
        padding: 5px;
        margin-bottom: 5px;
        text-align: center; }
        #block_time-data {
        display: inline-block;
        white-spage: nowrap; }
        span { 
        white-space: nowrap; }
        #hours, #min, #sec { margin: 0 3px; padding-right: 2px; position: relative; top: 1.5px; }
.colon { position: relative; bottom: 2px; }
    </style>
    </head>
    <body>
    <div id="header">
    <div id="header_left">
    <div id="box-logo">
    <span id="C_f">c</span><span id="a_f">a</span><span id="c_f">c</span><span id="t_f">t</span><span id="u_f">u</span><span id="s_f">s</span>
    <span id="C">c</span><span id="a">a</span><span id="c">c</span><span id="t">t</span><span id="u">u</span><span id="s">s</span>
    </div>
    </div>
        <div id="block_time-data">
<div id="header-time"><span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span></div>
<div id="header-date">
        </div>
        </div>
        </div>
  </body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2019, 11:07
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 480

Код всей страницы не поместился, вырезала куски, но главное отображается, кто подскажет почему первая буква движется по одной линии, а когда начинается вторая анимация, буква смещена вверх?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сделать следующую верстку? s24344 (X)HTML/CSS 2 05.11.2018 11:37
Как правильно сделать массив и его использовать? Ihor20121993 Общие вопросы Javascript 3 16.10.2018 16:00
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Подскажите, как сделать правильно отрисовку без перезагрузки всей страницы yiooxir Angular.js 1 24.12.2013 16:30
Как сделать замену css свойств? Houdy Общие вопросы Javascript 8 04.11.2013 05:38