Animowany css

Question

Witam, chciałbym zrobić animacje dla borderu i mam taki kod animacji:

a:hover{
	animation: animate 8s border infinite;
}
@keyframes animate
{
	0%
	{
		background-position: 0%;
	}
	100%
	{
		background-position: 400%;
	}
}

Jednak nie zmienia on nic po najechaniu, może coś źle robię dlatego proszę o pomoc. Jestem początkujący w animacjach w css. Kod częściowo z neta niestety. Tutaj mam jeszcze border:

border-color: #03a9f4 #f441a5 #ffeb3b #03a9f4;
border-style: solid;
border-size: 2px;
background-size: 400%;
border-radius: 30px;

 

Answer 1

Wszystko Ci się pomieszało, więc po kolei:

animation: animate 8s border infinite;

przy własności 'animation' definiujesz: jaka animacja ma zostać wykonana, czas jej trwania, tempo, ile razy animacja ma się wykonać.

Elementy, które chcesz zanimować umieszczasz w klamrach (zgaduję, że po najechaniu myszką u Ciebie ma się zmieniać border-color):

@keyframes animate
{
    0%
    {
        background-position: 0%;
    }
    100%
    {
        background-position: 400%;
    }
}

Nie wiem jak background-position ma zanimować border. Napisałeś, że jesteś początkujący, ale to są naprawdę podstawy podstaw.

Jest bardzo dużo tutoriali dotyczących animowania w css, przejrzyj je:
https://www.w3schools.com/css/css3_animations.asp
Jeśli chcesz po polsku:
http://webkod.pl/kurs-css/lekcje/dzial-1/animacja-elementu-animation-css3

Pozdrawiam :^)

Comments

Dziękuję już wszystko rozumiem :D

Answer 2

Jaką animację dokładnie? Tutaj, twoja animacja odnosi się do tła elementu a nie do borderda.

border-size: 2px; jest niepoprawne. Poprawny zapis, to border-width: 2px;