Need a little help at CSS.

Question

#Solmin {
Animation-name:Solminel;
Animation-duration:3s;
-webkit-@keyframes Solminel{
0%{ width: 50px;
height: 50px;
background: #FFF;
border:2px solid #FFF;
color:#FFF;
-webkit-border-radius:10px; }
100%{-webkit-transition: border 3s , width 3s, color 5s, background 3s; #Solmin:hover {
width: 480px;
color: #3232CD ;
background:#45A8ED;
border:2px solid #444;
} }}I want to know why my code is not working and how I can correct it. Thanks.

Answer 1

I'm not saying that this will work, because I don't have the rest of your code or know what exactly you are attempting to do, but your CSS should look a bit more like this:

#Solmin {
Animation-name:Solminel;
Animation-duration:3s;
}

#Solmin:hover {
width: 480px;
color: #3232CD ;
background:#45A8ED;
border:2px solid #444;
}

@-webkit-keyframes Solminel {
0% {
width: 50px;
height: 50px;
background: #FFF;
border:2px solid #FFF;
color:#FFF;
-webkit-border-radius:10px;
border-radius: 10px;
}

100% {
-webkit-transition: border 3s , width 3s, color 5s, background 3s;
transition: border 3s , width 3s, color 5s, background 3s;
}
}

@keyframes Solminel {
0% {
width: 50px;
height: 50px;
background: #FFF;
border:2px solid #FFF;
color:#FFF;
-webkit-border-radius:10px;
border-radius: 10px;
}

100% {
-webkit-transition: border 3s , width 3s, color 5s, background 3s;
transition: border 3s , width 3s, color 5s, background 3s;
}
}