npofopr

animation не работает

Recommended Posts

Помогите разобраться, почему не работает данный код

http://jsfiddle.net/npofopr/da88b/

Хотя тут все работает http://codepen.io/fanchou/pen/clufJ

На codepin сделано scss, но оно и в css работает, если перевести.

Share this post


Link to post
Share on other sites

Ух ты, красиво!

Вы префиксы забыли поставить для вебкита:

 -webkit-animation: rota 3s linear infinite;


from { -webkit-transform:rotate(0deg); }
to { -webkit-transform:rotate(360deg); }

http://jsfiddle.net/da88b/4/

Edited by mrnobody

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 d0ublezer0
      http://leveler.ru/i-icons/demo.html
      Cлепил из svg набор иконок в icomoon, приклеил анимацию вращения. Не вращается

      В найденном примере вроде всё так же. Но при этом - работает:
      https://codepen.io/Keyamoon/pen/aHxuq
      Что я сделал не так?
       
      UPD: не хватало
      display:inline-block;  
    • By Highlander
      Подскажите кто сталкивался с анимированием эффекта нажатия через animation? Через transition  понятно как, но вот тут http://landing-animation.powercode.pro/ верхние правые кнопки уж очень приятно выглядят, пробовал повторить через инспектор, но безуспешно. Или где-то ошибаюсь или есть какая-то особенность. 
      Спасибо.
    • By Miha1l
      Здравствуйте, наткнулся на простую CSS анимацию свойством animation, но что-то она у меня не запускается - просто стоит посередине кнопки и все. Помогите пожалуйста.
      Пытаюсь скопировать "перелив" с кнопки Смотреть тут http://ma******.ru/
      .b-button_animation { animation: 4s ease 0s normal none infinite running flash-button; background-image: -moz-linear-gradient(0px 0 , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 50%); background-position: -150px -150px, 0 0; background-size: 250% 450%, 100% 100%; } .b-button_common-black { background: #686868; /* Old browsers */ background: -moz-linear-gradient(top, #686868 0%, #2a2a2c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #686868 0%,#2a2a2c 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #686868 0%,#2a2a2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#2a2a2c',GradientType=0 ); /* IE6-9 */ height: 65px; width: 270px; -webkit-border-radius: 65px; -moz-border-radius: 65px; border-radius: 65px; } .b-button { display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); text-align: center; }
       
      HTML кнопки
      <div class="b-button b-button_common-black"><a href="#" class="b-button_animation>Нажми меня!</a></div>
       
  • Member Statistics

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

    No registered users viewing this page.