css - 使用 :hover to trigger @keyframes animation when the element uses multiple animations-6ren

css - 使用 :hover to trigger @keyframes animation when the element uses multiple animations

转载作者：太空宇宙更新时间：2023-11-03 18:22:53

25

4

我有一组图标，它们从页面中心过渡到一个设定点，然后保持在那里。我想要做的是将它们设置为过渡以具有更粗的边框并在我将鼠标悬停在其中一个上时缩放到 130x130px，但只出现初始动画

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;
}
}

和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>

有什么线索吗？

最佳答案

我不确定您为什么仅将关键帧用于简单的悬停动画。您可以只为该动画使用 css3 转换

看演示

@-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/

在那个 fiddle 中，您可以取消注释关键帧属性，只是为了检查并查看如果没有为您的悬停效果正确完成使用关键帧时动画有多糟糕

我也不确定#FTPSlideOut 在您的网站上的位置和显示方式，所以我在该演示中几乎看不到它。我使用了 Opacity 而不是 visibilty，你需要根据你的情况修改它。

有关 CSS3 转换的更多信息: http://css-tricks.com/almanac/properties/t/transition/

干杯

关于css - 使用 :hover to trigger @keyframes animation when the element uses multiple animations，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21471125/

25

4

0

文章推荐： css - IE8 不应用该样式，即使它的开发人员工具显示它

文章推荐： c# - 我可以使用 Telegram 机器人删除用户消息吗？

文章推荐： C# 检测正在关闭的应用程序

文章推荐： ruby-on-rails - 在设备中的两个 Web 应用程序之间共享 session

regex - 使用 linux 终端在 .txt 中查找 animal-060、animal-061、animal-062 ...、animal-069
我想使用 linux 终端在 .txt 文档中找到字符串 animal-0**。 ** 是从 60 到 69 的数字。我想我必须在命令中使用 grep 和正则表达式:grep -E 'animal-0
c# - 为什么 Animals[] animals = new Cat[5] 编译，但 List animals = new List() 不编译？
在他的C# 深入一书中，Jon Skeet 试图回答以下问题: Why can't I convert List to List? 为了解释它，他从一个代码片段开始，其中包括以下两行: Animal[
java - public void addAll(List animals) 和 public void addAll(List animals) 有什么区别？
我对此有点困惑，所以希望能提供一些说明。 public void addAll(List animals) 对比 public void addAll(List animals) 最佳答案区别在于
animation - 使用Core Animation，是否可以为多个CALayer组合动画？
我遇到的情况是，我有许多CALayer以“基于回合”的方式进行动画处理。我为每个CALayer上的位置设置了动画，但是它们具有完全相同的持续时间。一旦所有这些CALayer动画完成，就会启动一个新的“
animation - Unity Animator 默认图层状态在第一帧卡住
我为正在拔出的刀和空闲状态设置了动画，但是无论我做什么，它们都不会在游戏中设置动画。相反，它卡住在第一帧上。这是动画窗口运行时的样子: 动画: 在检查器中: 最佳答案我遇到了类似的问题，它归结于动画
animation - jQueryMobile : page animations
我的单个 HTML 文件中嵌入了 2 个页面。所以它所做的是最初它显示 PAGE1，然后如果我从右向左或从左向右滑动 PAGE2 应该显示。我的问题是如何根据我的滑动更改页面动画？比如当我从右向左滑动
react-native - 使用 Animated.Flatlist 和 Animated.ScrollView 为 Animated.View 设置动画不流畅
我想做一个动画标题。我创建了一个 FlatList 的动画组件，用过 onScroll函数来更新动画值。使用绝对位置放置一个 View (Animated.View) 作为动画 FlatList
iphone - 打开窗帘: Animation with Core Animation
我想制作一个打开的窗帘的动画。我有两张图像:一张用于窗帘的左侧，一张用于窗帘的右侧(以红色表示)。我想用核心动画顺利地将它们滑走。我应该寻找什么类型的动画？如何实现逼真的滑动风格？问候，斯特凡 a
animation - 在 Unity Animator 中缓慢旋转
我有一个简单的旋转动画，可以让一个对象绕其轴旋转。目前它旋转得太快了，我想减慢速度，我试过增加样本？？但我对动画了解不多，所以我可能过得很好。如何放慢动画速度？它只有两个键。最佳答案首先，通过双击
animation - Angularjs ng-animate 移动示例？
我似乎无法在上类时获得 angularjs ng-animate，而且在野外似乎也没有任何示例。以演示 fiddle 为例: http://jsfiddle.net/yfajy/ 向 CSS 添加如下
jquery-animate - jQuery animate() 显示动画进度的百分比
使用以下代码段:http://jsfiddle.net/sylouuu/V7a3Y/2/ 我想在动画的#log 中显示从 0% 到 100% 的进度百分比，100% 很容易通过回调... 有可能这样做
animation - 使用 SVG animate 为折线的外观设置动画
我正在 HTML 中使用 SVG 来使用折线工具定义特定的形状。我希望通过按一下按钮并在几秒钟内将特定形状的外观动画化为不同的形状。我一直在考虑使用动画工具来更改折线点属性，但到目前为止一直无法找到
jQuery animate().delay().animate() 我这样做对吗？
您好，在 Firefox(相当糟糕)和 Chrome 之间获得可变性能和效果(还可以)有时这不会执行第一个动画，有时会卡住。我的结构正确吗？ $notification.animate({
iphone - 设置编辑 :animated: is missing animation?
我在 iOS 编程时遇到了一个问题:当我尝试为我的 tableView 制作自定义编辑按钮时，我无法将其设置为动画。下面是我如何初始化 tableview: - (void)viewWillAppea
animation - swift : animator() causes EXC_BAD_ACCESS
自 beta 5 以来，我注意到在 OS X 10.10 下隐式动画有一些奇怪的行为。调用动画代理有时会导致应用程序崩溃。我设置了一个非常简单的自定义 View 。这是完整的代码: import Co
animation - Angular2 Animations::Easings 没有按预期工作
我正在开发一个可折叠组件，您可以单击它来向上/向下滚动以显示/隐藏详细信息。组件如下: // component.ts import {Component, Directive, Input} fro
web-animations - 使用Web Animations API扩展div高度0 --> 'auto'
我正在努力了解 web animations standard和他们的 polyfill ，正如我所见，它在 Angular 动画库中运行良好(您将动画结束值设置为“*”，这将变为 div 大小的 1
animation - Xamarin 安卓 : Animated Splash Screen
我想创建一个动画闪屏，但出现此错误: Android.Content.Res.Resources+NotFoundException: File res/drawable/splash_screen.
core-animation - 使用 Core Animation 减慢和加速动画
我正在尝试对我的应用程序应用慢动作效果，就像按 Shift 时如何减慢 Mac OS 的大多数图形效果一样。我的应用程序使用 CoreAnimation，所以我认为它应该没什么大不了的:set sp
animation - Android :Translation and Rotation Animation simultaneously
我想以编程方式同时不在XML文件中显示两个动画，它应该 ROTATE和TRANSLATE 我怎样才能做到这一点？请以某种方式建议我?????? 这是ma代码:> ImageView snowImg1

首页

博学

6Ren·AI

商城

css - 使用 :hover to trigger @keyframes animation when the element uses multiple animations