Не работает анимация границ при изменении ширины и высоты блока

#html #css #css3 #svg #анимация

Пожалуйста, помогите в коде с анимацией границ.
Меняю исходную ширину и высоту блока, в результате анимация  верхней и левой 
границы блока работает, а вот внизу и справа нет.
Как не менял параметры не могу добиться одновременного появление анимации всех границ
блока jsfiddle
    

Ответы

Ответ 1

Автор вопроса видимо взял пример из первоисточника. и попытался его адаптировать
к своей задаче. Изменена ширина и высота блока.

Но при изменении габаритных размеров блока нужно менять параметры других  элементов.
Так как они все взаимосвязаны, то подобрать нужную величину методом тыка очень затруднительно.
Постараюсь разложить задачу на несколько простых этапов. 

1. Горизонтальное движение линий вдоль границ блока.   

    

На картинке видно, что линия должна иметь пробел равный ширине блока и длине черточек.
Так как вы задали ширину блока равную 230px, то линия будет иметь длину 690px - (230x3)
и атрибут stroke-dasharray(230 230) в итоге для верхней линии:

     


Нижняя линия будет двигаться слева направо, остальные атрибуты те же 

   


Другими словами мы видим постоянно только одну третью часть линии, которая двигается
над блоком. Ниже фрагмент кода. Наведите курсор для начала анимации.



.box {
	width: 690px;
	height: 260px;
	position: relative;
	background: rgba(255,255,255,1);
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	color: #2c3e50;
	background:#c3c3c3;	
	box-shadow: inset 0 0 0 3px #2c3e50;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
} 
.box svg line {
	stroke-width: 15;
	stroke: dodgerblue;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.box:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.box svg line.top,
.box svg line.bottom {
	stroke-dasharray: 230 230 ; 
}



.box:hover svg line.top {
	-webkit-transform: translateX(-460px);
	transform: translateX(-460px);
} 

.box:hover svg line.bottom {
	-webkit-transform: translateX(460px);
	transform: translateX(460px);
}





    

2. Вертикальное движение линий вдоль границ блока.    

Высота блока - 260px Длина вертикальных линий - 260x3=780px     

Атрибуты линий: 

 
     


левая линия движется вниз 

transform: translateY(920px);    


Правая линия движется вверх 

transform: translateY(-920px); 


Пример вертикальной анимации линий: 



.box {
	width: 230px;
	height: 520px;
	position: relative;
	background: rgba(255,255,255,1);
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	color: #2c3e50;
	background:#c3c3c3;	
	box-shadow: inset 0 0 0 3px #2c3e50;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
} 
.box svg line {
	stroke-width: 15;
	stroke: dodgerblue;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.box:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.box svg line.left,
.box svg line.right {
	stroke-dasharray: 260 260;
}


.box:hover svg line.left {
	-webkit-transform: translateY(520px);
	transform: translateY(520px);
}

.box:hover svg line.right {
	-webkit-transform: translateY(-520px);
	transform: translateY(-520px);
}







3. Совместная анимация вдоль всех сторон блока.    

    

Ниже код. Анимация начинается при наведении курсора.   



@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Ruthie);
body {
	background: #2c3e50;
	color: #ecf0f1;
	font-size: 100%;
	line-height: 1.25;
	font-family: 'Lato', Arial, sans-serif;
}
.box {
	width: 230px;
	height: 260px;
	position: relative;
	background: rgba(255,255,255,1);
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	color: #2c3e50;
	box-shadow: inset 0 0 0 3px #2c3e50;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
}

.box:hover {
	background: rgba(255,255,255,0);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.box h3 {
	font-family: "Ruthie", sans-serif;
	font-size: 200px;
	line-height:10px;
	 margin: 0 auto;
  padding-top:75px; 
  margin-top:40px;
	font-weight: 900;
	width: 200px;
 text-align: center;
}

.box span {
	display: block;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 5px;
}

.box h3,
.box span {
	-webkit-transition: color 0.4s 0.5s;
	transition: color 0.4s 0.5s;
	margin-left: 15px;
}

.box:hover h3,
.box:hover span {
	color: #fff;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.box:hover h3,
.box:hover span {
	color: #fff;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.box svg {
	position: absolute;
	top: 0;
	left: 0;
}

.box svg line {
	stroke-width: 3;
	stroke: #ecf0f1;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.box:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.box svg line.top,
.box svg line.bottom {
	stroke-dasharray: 230 230; 
}

.box svg line.left,
.box svg line.right {
	stroke-dasharray: 260 260;
}

.box:hover svg line.top {
	-webkit-transform: translateX(-460px);
	transform: translateX(-460px);
}

.box:hover svg line.bottom {
	-webkit-transform: translateX(460px);
	transform: translateX(460px);
}

.box:hover svg line.left {
	-webkit-transform: translateY(520px);
	transform: translateY(520px);
}

.box:hover svg line.right {
	-webkit-transform: translateY(-520px);
	transform: translateY(-520px);
}



D







Еще один пример с этой же техникой реализации. 

Приложение работает во всех современных браузерах, кроме IE