Как удалить анимацию блока?

283

23 июля 2017, 11:52

Как удалить анимацию родителя? animation: none у элементов не помогает.

<div id="some" class="main" style="background-image: 
url(/upload/test.png);animation:colors 3s infinite;">
  <a href="/folder/" class="main-list-item-title">Folder</a>
  <ul class="main-list-item-links">
    <li><a id="bx_1847241719_18" href="/folder/add/">ADDITIONAL</a></li>
  </ul>
</div>

Answer 1

/*var div = document.getElementsByClassName('main'); 
for (var i = 0; i < div.length; i++) { 
  div[i].style.animation = 'none'; 
}*/

.main-catalog-list-item { 
  height: 293px; 
  display: block; 
  width: 100%; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -o-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  padding: 26px; 
  padding-right: 10px; 
  margin-top: 20px; 
  position: relative; 
} 
 
.main-catalog-list-item-bg { 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  background-size: 100%; 
  background-position: center center; 
  background-repeat: no-repeat; 
  z-index: -1; 
  border-radius: 7px; 
  -webkit-transition: all ease-out 0.3s; 
  -moz-transition: all ease-out 0.3s; 
  -o-transition: all ease-out 0.3s; 
  transition: all ease-out 0.3s; 
} 
 
.main-catalog-list-item:hover .main-catalog-list-item-bg { 
  background-size: 105%; 
} 
 
a.main-catalog-list-item-title { 
  font-size: 33.27px; 
  font-weight: bold; 
  line-height: 48px; 
  text-transform: uppercase; 
  background: #76b900; 
  display: inline-block; 
  text-decoration: none; 
  padding: 0px 12px; 
  color: #fff; 
  margin-top: 156px; 
} 
 
ul.main-catalog-list-item-links { 
  list-style: none; 
  margin-top: 17px; 
} 
 
ul.main-catalog-list-item-links li:after { 
  content: none; 
} 
 
ul.main-catalog-list-item-links li { 
  display: inline-block; 
} 
 
ul.main-catalog-list-item-links li a { 
  color: #fff; 
  font-size: 11px; 
  text-decoration: none; 
  margin-left: 10px; 
  /* margin-right:5px;*/ 
} 
 
ul.main-catalog-list-item-links li a:hover { 
  color: #76b900; 
} 
 
@keyframes colorrun { 
  from { 
    -webkit-filter: hue-rotate(0deg); 
    filter: hue-rotate(0deg); 
  } 
  to { 
    -webkit-filter: hue-rotate(359deg); 
    filter: hue-rotate(359deg); 
  } 
}

<div id="bx_1847241719_17" class="main-catalog-list-item"> 
  <div class="main-catalog-list-item-bg" style="background-image: url(https://armoskill.ru/upload/iblock/89d/wallpaper_art_pc_wst_for_site_small.jpg);animation:colorrun 3s infinite;"></div> 
  <a href="/catalog/rabochie-stantsii/" class="main-catalog-list-item-title">Рабочие станции</a> 
  <ul class="main-catalog-list-item-links"> 
    <li><a id="bx_1847241719_23" href="/catalog/rabochie-stantsii/bazovye/">БАЗОВЫЕ</a></li> 
    <li><a id="bx_1847241719_24" href="/catalog/rabochie-stantsii/proizvoditelnye/">ПРОИЗВОДИТЕЛЬНЫЕ</a></li> 
    <li><a id="bx_1847241719_25" href="/catalog/rabochie-stantsii/multimediynye/">МУЛЬТИМЕДИЙНЫЕ</a></li> 
    <li><a id="bx_1847241719_26" href="/catalog/rabochie-stantsii/spetsializirovannye/">СПЕЦИАЛИЗИРОВАННЫЕ</a></li> 
  </ul> 
</div>