Как сделать анимацию?

#css #css3 #анимация #css_animation #animate

Здравствуйте. Помогите, пожалуйста, сделать анимацию блоку такую, как это видно при
наведении на него. Например, через каждые три секунды, чтобы она повторялась дважды.
Раз-два...пауза 3сек... раз-два...пауза 3сек... и т.д. Спасибо!



#arrow,
#arrow_top {
	z-index: 10;
	position: fixed;
	overflow: hidden;
	margin: 0 auto;
	width: 64px;
	height: 64px;
}
#arrow {
	
	bottom: 0;
	left: 0;
	right: 0;
}
#arrow_top {
	top: 0;
	left: 0;
}
#arrow .arrow {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	position: relative;
	top: 0px;
}
#arrow:hover .arrow {
	top: 5px;
}
#arrow .arrow_down {
	width: 0px;
	height: 0px;
	background: red;
}
#arrow .arrow_down:after {
	position: absolute;
	content:"";
	top: 0px;
	left: 17px;
	width: 30px;
	height: 30px;
	background: transparent;
	border-right: 3px solid red;
	border-top: 3px solid red;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}




    

Ответы

Ответ 1

Если совсем по простому, при помощи css анимации, как-то так:



#arrow,
    #arrow_top {
    	z-index: 10;
    	position: fixed;
    	overflow: hidden;
    	margin: 0 auto;
    	width: 64px;
    	height: 64px;
    }
    #arrow {
    	bottom: 0;
    	left: 0;
    	right: 0;
      animation: arrow 5s linear infinite;
}

@keyframes arrow {
    0% {
        transform: translateY(0px);
    }
    
    70% {
        transform: translateY(0px);
    }
    
    73% {
        transform: translateY(5px);
    }
    
    76% {
        transform: translateY(0px);
    }
    79% {
        transform: translateY(5px);
    }
    
    82% {
        transform: translateY(0px);
    }

    }
    100% {
        transform: translateY(0px);
    }
}
    #arrow_top {
    	top: 0;
    	left: 0;
    }
    #arrow .arrow {
    	-webkit-transition: all 0.3s ease-out;
    	-moz-transition: all 0.3s ease-out;
    	-ms-transition: all 0.3s ease-out;
    	-o-transition: all 0.3s ease-out;
    	transition: all 0.3s ease-out;
    	position: relative;
    	top: 0px;
    }
    #arrow:hover .arrow {
    	top: 5px;
    }
    #arrow .arrow_down {
    	width: 0px;
    	height: 0px;
    	background: red;
    }
    #arrow .arrow_down:after {
    	position: absolute;
    	content:"";
    	top: 0px;
    	left: 17px;
    	width: 30px;
    	height: 30px;
    	background: transparent;
    	border-right: 3px solid red;
    	border-top: 3px solid red;
    	-webkit-transform: rotate(135deg);
    	-moz-transform: rotate(135deg);
    	-ms-transform: rotate(135deg);
    	-o-transform: rotate(135deg);
    	transform: rotate(135deg);
    }