Всем привет.
У меня есть анимация сделанная с помощью @keyframes
и есть hover-эффект
при наведении.
Так вот мне нужно чтобы анимация сделанная с помощью @keyframes
исчезла при наведении.
Заранее прошу прошение за такой длинный код, просто хотел чтобы он корректно отображался.
Мне говорили, что это можно сделать с помощью JS
, но я не особо в нем разбираюсь.
Кому не сложно, помогите пожалуйста.
body {
background: #3a3939;
}
* {
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
}
form {
display: inline-block;
margin-left: 40%;
}
::placeholder {
color: #7d8a96;
}
#surname,
#name,
#patronymic {
width: 360px;
padding: 8px 0 8px 0;
text-align: center;
font-size: 16px;
border: 2px solid #2196f3;
background: #3a3939;
color: #c9cdd0;
border-radius: 4px;
}
.selected {
text-align: center;
color: #83c0f6
}
#select {
margin-top: 5px;
padding: 0 10px 0 10px;
background: #3a3939;
color: #83c0f6;
border: 1px solid #2196f3;
}
#comment {
background: #3a3939;
color: #c9cdd0;
font-size: 16px;
border: 2px solid #2196f3;
border-radius: 4px;
}
#comment::placeholder {
padding: 10px 10px;
}
.blick {
position: absolute;
background: #b2d8fa;
opacity: 0.5;
top: 2.5px;
left: 0;
width: 20px;
height: 89%;
transform: translateX(-4em) skewX(-45deg);
animation: btn-blick 2.5s infinite 0.5s;
overflow: hidden;
}
@keyframes btn-blick {
from {
transform: translateX(-4em) skewX(-45deg);
}
to {
transform: translateX(20em) skewX(-45deg);
}
}
.btn-decor {
position: relative;
text-align: center;
color: #83c0f6;
display: inline-block;
margin-left: 94px;
overflow: hidden;
/*padding: 4px 8px 4px 8px;*/
}
.btn-line {
position: absolute;
display: block;
}
.btn-line-top {
top: 0px;
left: -100%;
height: 2px;
width: 100%;
background: linear-gradient(90deg, transparent, #2196f3);
}
.btn-line-right {
right: 0px;
top: -100%;
height: 100%;
width: 2px;
background: linear-gradient(180deg, transparent, #2196f3);
}
.btn-line-bottom {
bottom: 0px;
right: -100%;
height: 2px;
width: 100%;
background: linear-gradient(270deg, transparent, #2196f3);
}
.btn-line-left {
left: 0px;
bottom: -100%;
height: 100%;
width: 2px;
background: linear-gradient(0deg, transparent, #2196f3);
}
#btn {
display: inline-block;
cursor: pointer;
padding: 10px 24px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1.5px;
font-size: 16px;
color: #83c0f6;
background: #3a3939;
border: 2px solid #2196f3;
border-radius: 4px;
transition: 0.2s;
}
#btn::before {
content: '';
position: absolute;
color: #fff;
top: 0;
left: 0;
width: 5px;
height: 100%;
}
#btn:hover {
border: none;
transition: 0.5s;
transition-delay: 1s;
background: #2196f3;
color: #3a3939;
/*background: linear-gradient(45deg, #83c0f6, #C5DDE8)*/
;
}
.btn-decor:hover .btn-line-top {
left: 100%;
transition: 1s;
transition-delay: 0.25s;
}
.btn-decor:hover .btn-line-right {
top: 100%;
transition: 1s;
transition-delay: 0.18s;
}
.btn-decor:hover .btn-line-bottom {
right: 100%;
transition: 1s;
transition-delay: 0.25s;
}
.btn-decor:hover .btn-line-left {
bottom: 100%;
transition: 1s;
transition-delay: 0.18s;
}
<form action="">
<p>
<input type="text" placeholder="Фамилия" id="surname" title="Введите вашу фамилию">
</p>
<p>
<input type="text" placeholder="Имя" id="name" title="Введите ваше имя">
</p>
<p>
<input type="text" placeholder="Отчество" id="patronymic" title="Введите ваше отчество">
</p>
<p class="selected">
<label for="select">Укажите возраст</label> <br>
<select name="select" id="select">
<option disabled selected>Ваш возраст</option>
<option value="sm-16">До 16</option>
<option value="16-21">16-21</option>
<option value="21-27">21-27</option>
<option value="27-35">27-35</option>
<option value="35-45">35-45</option>
<option value="45-55">45-55</option>
<option value="up-55">Больше 55</option>
</select>
</p>
<p>
<textarea name="comment" id="comment" cols="42" rows="8" placeholder="Введите информацию о себе"></textarea>
</p>
<p class="btn-decor" id="btn-decor">
<span class="blick" id="blick"></span>
<span class="btn-line btn-line-top"></span>
<span class="btn-line btn-line-right"></span>
<span class="btn-line btn-line-bottom"></span>
<span class="btn-line btn-line-left"></span>
<input type="submit" id="btn" value="Отправить">
</p>
</form>