d0ublezer0

[Решено] Почему не работает анимация keyframes?

Recommended Posts

http://leveler.ru/i-icons/demo.html

Cлепил из svg набор иконок в icomoon, приклеил анимацию вращения. Не вращается

1w3V8m_9RIiwU1TscYEcWA.png

В найденном примере вроде всё так же. Но при этом - работает:

https://codepen.io/Keyamoon/pen/aHxuq

Что я сделал не так?

 

UPD: не хватало

display:inline-block;

 

Edited by d0ublezer0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Libiros
      Всем привет! Столкнулся со следующей проблемой:
      Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство 
      transform: rotate(-90deg); во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана.
      Итак, вот исходный код файлов:
      <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>Туризм</title> </head> <body> <div class="container-fluid turism_main"> <div class="row"> <div class="company-name"> <p>LuckyFox</p> <p>Travel</p> </div> <div class="aside_main col-xs-12"> <a href="#"><img src="img/afterparty.png" alt=""></a> </div> </div> <div class="aside-content"> <div class="aside-contact"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами </div> <div class="aside-mail"> <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться </div> <div class="aside-calendar"> <a href="#">Календарь</a> </div> <div class="aside-lang"> <span class="active">EN</span> / RU </div> </div> </div> </body> </html> А вот здесь style.css:
      .turism_main { background: gray; background-size: cover; height: 100vh; width: 100vw; color: #fff; position: relative; } .company-name { font-size: 2em !important; letter-spacing: 2px; opacity: .7; position: absolute; right: 45%; left: 45%; text-align: center !important; display: block; line-height: 1; margin-top: 15px; width: 200px; } .aside_main { text-align: right; padding: 0; } .aside-content { z-index: 999; position: absolute; right: -195px; top: 400px; transform: rotate(-90deg); font-size: .8em; background: black; } .aside-content div, .aside-content a{ display: inline-block; color: white; } .aside-content i { padding-right: 10px; color: #e9ba02; font-weight: bold; } .aside-contact, .aside-mail { padding: 5px 10px 5px 10px; border: 1px solid white; margin-right: 20px; } .aside-calendar, .aside-lang { margin-left: 20px; } Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет.
      Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять.
      И еще есть один вопрос:
      Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко...
      Еще раз повторю задачу:
      Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ...
      Как быть?
      Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...

    • By Vic-Tor
      Как сделать анимацию цикличной?
      Есть блок, который маячит, привлекает, но делает он это всего 1 раз.
      Как и можно ли с помощью всего лишь css придать ему цикличность с заданными пробелами (остановками).
       
      Пример:
       
      .info-box { background : #c2ddf9; border : #CD0000 solid 1px; color : #CD0000; font-weight : 700;   animation: spin 0.050s linear 3s alternate; animation-iteration-count: 10; } @keyframes spin { 0% {transform: scale(1.05, 1.05);} 100% {transform: scale(0.9, 0.9);} }  
      Спасибо!
    • By veremey
      Привет. У меня возникла проблема:
      Есть такой пентагон, который при клике на пункт меню поворачивается в его сторону https://yadi.sk/i/Xv1jCEZkghMH6
      проблема в том, что пентагон должен крутиться по короткому пути к активному пункту.
  • Member Statistics

    46,440
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.