CSS3动画关键帧

时间:2013-04-09 10:14:57

标签: css3 keyframe

我想知道是否可以回放我的动画,案例如下:

我用css3关键帧为我的导航设置动画:

        @-webkit-keyframes nav /* Safari and Chrome */
        {
            0% {width: 0%; opacity:0.0;}
        100% {width: 22%; opacity:0.5;}
        }

        nav:hover
        {
            animation: nav 3s;
            -moz-animation: nav 3s; /* Firefox */
            -webkit-animation: nav 3s; /* Safari and Chrome */
            -o-animation: nav 3s; /* Opera */
        }

现在,当我将鼠标悬停时,他会以动画展开,我不知道如何在我发布悬停时如何顺畅地回放动画。

1 个答案:

答案 0 :(得分:0)

您可以使用CSS转换来执行此操作。

CSS示例

nav
{
    width: 0%;
    opacity: 0;
    transition:all 3s ease-in-out;    
}

nav:hover
{
    width: 22%; 
    opacity:0.5;     
}