CODEWITHSUNDEEP
csshovercss-animations
jgibson02
jgibson02

Reputation: 11

Using :hover to trigger @keyframes animation when the element uses multiple animations

I have a set of icons that transition from the center of the page to a set point, and then remain there. What I want to do is set them to transition to have a thicker border and scale to 130x130px whenever I mouse over one of them, but only the initial animation occurs

CSS: 

.iconborder {
border-width: 5px;
border-style: solid;
border-radius: 100em;
border-color: white;
}

.iconborder:hover {animation-name: icongrow; animation-duration: 0.2s; animation-timing-function: cubic-bezier;}

@keyframes icongrow {
0% {
    border-width: 5px;
    width: 100px;
    height: 100px;
}

100% {
    border-width: 10px;
    width: 130px;
    height: 130px;
}
}

#FTPSlideOut
{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
visibility: hidden;

animation-name: FTPSlideOut;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier;
animation-delay: 1s;
animation-fill-mode: forwards;

}

@keyframes FTPSlideOut {
0% {
    transform: translate(0px, 0px);
    visibility: visible;
}

100% {
    transform: translate(-300px, -150px);
    visibility: visible;
}
}

And HTML:

    <body style="background-color:#D4D4D4;height:100%;width:100%">
        <img id="SlideUp" class="dropshadow" src="picCenterDotFinalwText.png">
        <a href="/net2ftp"><img id="FTPSlideOut" class="dropshadow iconborder" src="FTP.png"></a>
        <img id="PicturesSlideOut" class="dropshadow iconborder" src="Pictures.png">
        <img id="VideosSlideOut" class="dropshadow iconborder" src="Videos.png">
        <img id="MusicSlideOut" class="dropshadow iconborder" src="Music.png">
        <img id="DocumentsSlideOut" class="dropshadow iconborder" src="Documents.png">
        <a href="https://www.gmail.com"><img id="EmailSlideOut" class="dropshadow iconborder" src="Email.png"></a>
</body>

Any clues?

Upvotes: 1

Views: 8566

Answers (2)

Kizito Njoku
Kizito Njoku

Reputation: 1

Just put your animation in the class pseudo selector with the hover in it? like this

.clickMes {
    color: white;
    font-size: 17pt;
    text-decoration: none;
}

.clickMes:active {
    color: cyan;
}

.clickMes:hover {
    animation: clickmes 1.3s infinite;
}

@keyframes clickmes {
    0% {
        background-color: none;
    }
    50% {
        background-color: cyan;
    }
    100% {
        background-color: none;
    }
}

Upvotes: 0

nold
nold

Reputation: 498

Im not sure why are you using keyframes for just a simple hover animation. You can use css3 transitions just for that animation

see demo 

@-webkit-keyframes icongrow {
    0%{
        border-width: 5px;
        width: 100px;
        height: 100px;    
    }

    100% {
        border-width: 10px;
        width: 130px;
        height: 130px;
        border-color:#ccc;
    }
}

.iconborder{   
    text-align:center;
    border: solid 5px #fff;  /* use shorthand */
    border-radius: 100em; 

    /* customize */
    -webkit-transition : border 0.2s linear;     


   /*-webkit-animation-duration: 0.2s;*/ 

}

.iconborder:hover{ 
    border: 10px solid #fff; 
    width: 130px;
    height: 130px;  

    cursor:pointer; 
    /* -webkit-animation-name: icongrow;
      -webkit-animation-fill-mode: forwards;*/
} 



@-webkit-keyframes  FTPSlideOutAnimate {
     0%{  
         opacity:0;
         -webkit-transform: translate(0,0);
     }

    100% {
        opacity:1; 
        -webkit-transform: translate(-300px, -150px);  
    }
}



#FTPSlideOut{
    position: fixed;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 6; 

    /* customize */
    opacity:0.1;
   -webkit-transition: -webkit-transform 1s ease-in, 
                       opacity 0.5s  linear;  
}

#FTPSlideOut:hover{  
   -webkit-transform: translate(-300px, -150px);  
    opacity:1;

  /*-webkit-animation: FTPSlideOutAnimate 0.2s linear; 
    -webkit-animation-fill-mode: forwards;  */
}

http://jsfiddle.net/phcba/2/

in that fiddle you can uncomment the keyframes properties just to check and see how bad the animation it was when using Keyframes if not done right for your hover effect

Also im not sure how the #FTPSlideOut is position and displayed on your site, so I made it barely visible in that demo. Ive used Opacity instead of visibilty, you'll need to modify it in your case.

For more info about CSS3 transtions: http://css-tricks.com/almanac/properties/t/transition/

cheers

Upvotes: 0

Related Questions