: Элементы ключевого кадра CSS анимируются только тогда, когда они видны в окне просмотра?

ProgramBox

: Элементы ключевого кадра CSS анимируются только тогда, когда они видны в окне просмотра?

Post author:admin
Запись опубликована:25 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css #animation

#javascript #jquery #HTML #css #Анимация

Вопрос:

http://www.samnorris.co.nz

В разделе «О программе» в разделе «Навыки» у меня есть список «Панель прогрессирования навыков», созданный с помощью CSS, который должен анимироваться с использованием ключевых кадров, но анимацию нельзя увидеть на моей странице, предположительно, потому, что она запускается сразу после загрузки страницы.

Есть ли какой-либо способ отложить или запустить анимацию ключевого кадра только при нажатии на заголовок / слайд «Навыки» или, альтернативно, только тогда, когда контейнер с панелью навыков виден в окне просмотра?

Мне известны различные методы запуска анимации только при прокрутке страницы до определенной точки, но в данном случае, очевидно, это не совсем то, что я хочу…

Соответствующий код (для Krish’а):

CSS

 .about-skills {
    width:398px;
    margin:0;
    position:relative;
    float:left;
    font-size:12px;
    line-height:2em;
    padding:30px 0 30px;
    margin-left: 15px;
}

.skills-col { width:400px; }

.skills-list { 
    display: none;
    list-style:none; 
    padding-top:20px;
}

.skills-list li { 
    margin-bottom:50px; 
    background:#ececec; 
    height:5px; 
    border-radius:3px; 
    border-left:1px solid #cecece; 
    border-top:1px solid #cecece; 
    border-right:1px solid #cecece; 
    border-bottom:1px solid #b5b5b5;  
}

.skills-list li em { 
    position:relative; 
    top:-30px;
}

.skills-expand {
    height:1px; 
    margin:2px 0; 
    background:#0dc9ff; 
    position:absolute;
    box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
}

.html5       { display: block; width:85%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;       }
.css3        { display: block; width:70%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;        }
.jquery      { display: block; width:50%;  -moz-animation:jquery 2s ease-out;      -webkit-animation:jquery 2s ease-out;      }
.php         { display: block; width:20%;  -moz-animation:php 2s ease-out;   -webkit-animation:php 2s ease-out;   }
.dreamweaver { display: block; width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
.photoshop   { display: block; width:100%; -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out; }
.responsive  { display: block; width:40%; -moz-animation:responsive 2s ease-out;   -webkit-animation:responsive 2s ease-out; }

@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:85%;}  }
@-moz-keyframes css3        { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-moz-keyframes php         { 0%  { width:0px;} 100%{ width:20%;}  }
@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width:100%;} }
@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }
@-moz-keyframes responsive  { 0%  { width:0px;} 100%{ width:40%;} }

@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:85%;}  }
@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes php         { 0%  { width:0px;} 100%{ width:20%;}  }
@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width:100%;} }
@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }
@-webkit-keyframes responsive  { 0%  { width:0px;} 100%{ width:40%;} }

jQuery

 $('a.proficiencies').click(function(){
  $('.skills-list').toggleClass('html5');
});

1. Добавьте класс, используя javascript, когда элемент становится видимым. Вы действительно хотите, чтобы анимация запускалась при прокрутке до определенной точки — при достижении раздела. По этому поводу возникает много вопросов SO. Также, пожалуйста, включите соответствующий код внутри самого вопроса, потому что проблема больше не будет отображаться, как только проблема будет устранена

2. это то, что вы хотите codepen.io/anon/pen/pygqJ

3. Эй, я последовал вашему примеру — и кажется, что он что-то делает, но это своего рода ошибка — не могли бы вы, пожалуйста, взглянуть на пример здесь: samnorris.co.nz/test и посмотрите, что я, возможно, сделал неправильно? также обновил свой пост соответствующим кодом.

Ответ №1:

после просмотра вашего кода он будет хорошо работать с jquery addClass по щелчку a по ссылке

Структура HTML

     <a class="proficiencies">Proficiencies(click)</a>
    <ul>
      <li><em>HTML5</em><span class="skills-expand html5anim"></span></li>
      <li><em>CSS3</em><span class="skills-expand css3anim"></span></li>
    </ul>

jQuery

 $('a.proficiencies').click(function(){
  $('.html5anim').addClass('html5');

  $('.css3anim').addClass('css3');
});

Живая демонстрация: http://codepen.io/krish4u/pen/fyehA