keyframes

keyframes

关注
发信
关注(28)粉丝(399)

CSS3动画出来的：悬停

本文介绍了CSS3动画出来的：悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我设置了​​一个简单的动画，当你将鼠标悬停在一个图像，带来了一点点的附加信息。 jQuery的备份部分是笔试和工作正常，但我在使用中得到CSS3动画反向去当用户将鼠标悬停出麻烦的问题。

所以，当你在徘徊它的伟大工程，但只要你从悬停的元素只是消失。如果有一种方法可以让他们向后动画，当鼠标悬停在其他地方我想知道的是。非常感谢！

\r
\r

＃近期工作的div {位置：亲属;宽度：300像素;高度：168px;溢出：隐藏; }\r
                \r
                ＃近期工作的div：悬停.recent项目型{\r
                    动画名称：showType;\r
                    动画持续时间：.5s;\r
                    动画定时功能：缓解;\r
                    动画延迟：0;\r
                    动画迭代计数：1;\r
                    动画方向：正常;\r
                    动画播放状态：运行;\r
                    -moz-动画名称：showType;\r
                    -moz-动画持续时间：.5s;\r
                    -moz-动画定时功能：缓解;\r
                    -moz-动画延迟：0;\r
                    -moz-动画迭代计数：1;\r
                    -moz-动画方向：正常;\r
                    -moz-动画播放状态：运行;\r
                    -webkit-动画名称：showType;\r
                    -webkit-动画持续时间：.5s;\r
                    -webkit-动画定时功能：缓解;\r
                    -webkit-动画延迟：0;\r
                    -webkit-动画迭代计数：1;\r
                    -webkit-动画方向：正常;\r
                    -webkit-动画播放状态：运行;\r
                    顶部：0;\r
                }\r
                \r
                ＃近期工作的div：悬停.recent项目标题{\r
                    动画名称：showTitle;\r
                    动画持续时间：.5s;\r
                    动画定时功能：缓解;\r
                    动画延迟：0;\r
                    动画迭代计数：1;\r
                    动画方向：正常;\r
                    动画播放状态：运行;\r
                    -moz-动画名称：showTitle;\r
                    -moz-动画持续时间：.5s;\r
                    -moz-动画定时功能：缓解;\r
                    -moz-动画延迟：0;\r
                    -moz-动画迭代计数：1;\r
                    -moz-动画方向：正常;\r
                    -moz-动画播放状态：运行;\r
                    -webkit-动画名称：showTitle;\r
                    -webkit-动画持续时间：.5s;\r
                    -webkit-动画定时功能：缓解;\r
                    -webkit-动画延迟：0;\r
                    -webkit-动画迭代计数：1;\r
                    -webkit-动画方向：正常;\r
                    -webkit-动画播放状态：运行;\r
                    底部：0;\r
                }\r
            \r
            .recent项目标题{立场：绝对的;左：0;右：0;底部：-34px;填充：8像素10px的;背景：RGBA（0,0,0，.75）在;文字修饰：无;边框：0;字体大小：20像素;字体重量：400;颜色：#FFF; }\r
                .recent项目标题：悬停{颜色：＃FF9900;文字修饰：无; }\r
                \r
            .recent项目型{立场：绝对的;左：0;顶部：-26px;填充：4PX加上了8px;字体大小：12像素;字体重量：600;背景：＃FF9900;文本转换：大写;颜色：＃111; }\r
                .recent项目类型：悬停{颜色：#FFF;文字修饰：无; }\r
\r
@keyframes showType {\r
    从顶部{：-26px; }\r
    为{顶：0; }\r
}\r
\r
@ -moz-关键帧showType {\r
    从顶部{：-26px; }\r
    为{顶：0; }\r
}\r
\r
@ -webkit-关键帧showType {\r
    从顶部{：-26px; }\r
    为{顶：0; }\r
}\r
\r
@keyframes showTitle {\r
    从{底：-34px; }\r
    为{底：0; }\r
}\r
\r
@ -moz-关键帧showTitle {\r
    从{底：-34px; }\r
    为{底：0; }\r
}\r
\r
@ -webkit-关键帧showTitle {\r
    从{底：-34px; }\r
    为{底：0; }\r
}

\r

＆LT; D​​IV CLASS =行ID =近期工作＆GT;\r
            ＆LT; D​​IV CLASS =跨度三分之一＆GT;\r
                ＆LT; A HREF =＃类=最近的项目形象＆GT;＆LT; IMG SRC =htt​​p://dl.dropbox.com/u/1762184/recent-work01.pngWIDTH =300高度=168＆GT;＆下; / A＆GT;\r
                ＆LT; A HREF =＃类=最近的项目，标题为＆GT;费城＆LT; / A＆GT;\r
                ＆LT; A HREF =＃类=最近的项目型＆GT;影片版权＆lt; / A＆GT;\r
            ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r


解决方案

您不需要为这样简单的事情，因为这关键帧。

我给你做一个（只有 -webkit 厂商prefixes让事情变得简单）。

I'm setting up a simple animation that brings up a little additional information when you hover over an image. The jQuery backup part is written and works fine, though the issue I'm having trouble with is getting the CSS3 animation to go in reverse when the user hovers out.

So when you hover in it works great, but as soon as you hover out the elements just disappear. What I'd like to know is if there's a way to get them to animate backwards when the mouse hovers elsewhere. Thanks a lot!

#recent-work div { position: relative; width: 300px; height: 168px; overflow: hidden; }

                #recent-work div:hover .recent-project-type {
                    animation-name: showType;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showType;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showType;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    top: 0;
                }

                #recent-work div:hover .recent-project-title {
                    animation-name: showTitle;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showTitle;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showTitle;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    bottom: 0;
                }

            .recent-project-title { position: absolute; left: 0; right: 0; bottom: -34px; padding: 8px 10px; background: rgba(0,0,0,.75); text-decoration: none; border: 0; font-size: 20px; font-weight: 400; color: #fff; }
                .recent-project-title:hover { color: #ff9900; text-decoration: none; }

            .recent-project-type { position: absolute; left: 0; top: -26px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #ff9900; text-transform: uppercase; color: #111; }
                .recent-project-type:hover { color: #fff; text-decoration: none; }

@keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-moz-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-webkit-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-moz-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-webkit-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}
<div class="row" id="recent-work">
            <div class="span-one-third">
                <a href="#" class="recent-project-image"><img src="http://dl.dropbox.com/u/1762184/recent-work01.png" width="300" height="168"></a>
                <a href="#" class="recent-project-title">Philly</a>
                <a href="#" class="recent-project-type">Video</a>
            </div>
</div>

解决方案

You don't need keyframes for something as simple as this.

I made you a demo (with only -webkit vender prefixes to keep things simple).

这篇关于CSS3动画出来的：悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-23 04:48
Powered by LMLPHP ©2025 keyframes 0.034953