Search the Community
Showing results for tags 'анимация css циклы'.
Found 1 result
-
Добрый день! Подскажите как зациклить анимацию кнопки, пока что анимация работает только после клика, а мне нужно чтобы она работала всегда с перерывом в 1 секунду. код такой <!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Button Styles </title><meta name="description" content="Creative Button Styles - Modern and subtle styles & effects for buttons" /><meta name="keywords" content="button styles, css3, modern, flat button, subtle, effects, hover, web design" /><meta name="author" content="Codrops" /><link rel="stylesheet" type="text/css" href="css/component.css" /><script src="js/modernizr.custom.js"></script></head><body><section class="color-7" id="btn-click"><p class="text">Click on the buttons to see the effect</p><p><button class="btn btn-7 btn-7h icon-envelope">safsf</button><button class="btn btn-7 btn-7h icon-envelope">Submit form</button></p></section><script src="js/classie.js"></script><script>var buttons7Click = Array.prototype.slice.call( document.querySelectorAll( '#btn-click button' ) ),totalButtons7Click = buttons7Click.length;buttons7Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );function activate() {var self = this, activatedClass = 'btn-activated';if( classie.has( this, 'btn-7h' ) ) {// if it is the first of the two btn-7h then activatedClass = 'btn-error';// if it is the second then activatedClass = 'btn-success'activatedClass = buttons7Click.indexOf( this ) === totalButtons7Click-2 ? 'btn-error' : 'btn-success';}if( !classie.has( this, activatedClass ) ) {classie.add( this, activatedClass );setTimeout( function() { classie.remove( self, activatedClass ) }, 1000 );}};</script></body></html>/* General button style (reset) */.btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 25px 80px; display: inline-block; margin: 15px 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}.btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}/* Button 7 */.btn-7 { background: #17aa56; color: #fff; border-radius: 7px; box-shadow: 0 5px #119e4d; padding: 25px 60px 25px 90px;}/* Icon only style */.btn-icon-only { font-size: 0; padding: 25px 30px;}.btn-icon-only:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 26px; line-height: 54px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;}/* Button 7h */.btn-7h span { display: inline-block; width: 100%;}.btn-7h:before { position: absolute; left: 0; width: 40%; font-size: 160%; line-height: 0.8; color: #0a833d;}/* Success and error */.btn-error { color: transparent;}.btn-error:after { z-index: 1; color: #fff; left: 40%;}.btn-error { -webkit-animation: shake 0.5s; -moz-animation: shake 0.5s; animation: shake 0.5s;}@-webkit-keyframes shake { 0%, 100% {-webkit-transform: rotate(0deg);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: rotate(-1deg);} 20%, 40%, 60%, 80% {-webkit-transform: rotate(1deg);}}@-moz-keyframes shake { 0%, 100% {-moz-transform: rotate(0deg);} 10%, 30%, 50%, 70%, 90% {-moz-transform: rotate(-1deg);} 20%, 40%, 60%, 80% {-moz-transform: rotate(1deg);}}@keyframes shake { 0%, 100% {transform: rotate(0deg);} 10%, 30%, 50%, 70%, 90% {transform: rotate(-1deg);} 20%, 40%, 60%, 80% {transform: rotate(1deg);}}.btn-error:after { content: "Error!"; -webkit-animation: scaleFromUp 0.5s; -moz-animation: scaleFromUp 0.5s; animation: scaleFromUp 0.5s;}/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) *//*jshint browser: true, strict: true, undef: true *//*global define: false */( function( window ) {'use strict';// class helper functions from bonzo https://github.com/ded/bonzofunction classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");}// classList support for class management// altho to be fair, the api sucks because it won't accept multiple classes at oncevar hasClass, addClass, removeClass;if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };}else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); };}function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );}var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass};// transportif ( typeof define === 'function' && define.amd ) { // AMD define( classie );} else { // browser global window.classie = classie;}})( window );Заранее больше спасибо за отзывы.
