зацикливание анимации css

anutti · March 8, 2015

Добрый день!

Подскажите как зациклить анимацию кнопки, пока что анимация работает только после клика, а мне нужно чтобы она работала всегда с перерывом в 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 );

Заранее больше спасибо за отзывы.

Edited March 8, 2015 by anutti

anutti · March 8, 2015

Решение найдено, спасибо всем за внимание )

klierik · March 8, 2015

Выложи, пожалуйста, решение. Кому-то пригодится

Sign In

зацикливание анимации css

Question

anutti

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

anutti

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information