html - 动画图标 : two classes HTML element

Question

我开始在这 adress 建立博客.说到 HTMl 和 CSS，我几乎是个新手，但我学会了 :-(

我在为一个图标组合两个类时遇到了问题。该图标是 font-awsome 的一部分，重定向到另一个页面。如果可能的话，我想在打开新页面之前将其设置为动画。

我使用 animated.css动画它。仅在我的 HTML 中添加这两个类没有任何作用，因为它会直接打开新页面(在另一个选项卡中)。

部分HTML代码如下:

<p class="social">
{% for title, link in SOCIAL %}
   <a href="{{ link }}" target="_blank">
       <i class="fa fa-{{ title }} fa-2x"></i>
   </a>
 {% endfor %}
 </p>

下面是css的一部分:

.social {
display: inline-block;
margin-top: 0px;
}
.social a {
text-decoration: none;
margin-left: 15px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
color: #fff;
}

.links a {
font-size: 15px;
padding-left: 15px;
font-family: sans-serif;
letter-spacing: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
text-decoration: none;
color: #fff;
}

我不知道如何:

1. 在重定向到社交页面之前观看动画
2. 在哪里放置动画图标类。类声明将是例如:class="animated infinite bounce"。

谢谢你的帮助。

Answer 1

我可以请你重新考虑一下吗。

在获得他们正在寻找的信息之前，不要用他们需要看的动画来烦扰您的用户，...除非您正在销售动画图标:)

使用 :hover 和 :active 来创建效果，剩下的就不用管了。

更新:添加了一个在点击后仍然存在的第二个版本

.link {
    width: 80px;
    height: 30px;
    background: silver;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    line-height:30px;
}

.link:hover {
    background: lime;
    /* 
      put your animation properties here...  
    */
}
.link:active {
    background: red;
    /* 
      ...or here...  
    */
}

.linker {
    display: none;
}
.linker:checked + a {
  background: yellow;
    /* 
      ...or here.
    */
}

<a class="link">Click me!</a>

<label>
  <input type="checkbox" class="linker"/>
  <a class="link">Click me 2!</a>
</label>