如何生成这样的动画和“按钮动画”？

Question

在 http://demo.thbthemes.com/blaine/?fixed

，当你将鼠标悬停在按钮上他们有这个很整齐的动画，它得到 - > 另外，介绍文字动画页面加载了一点。

有关如何重现这些cleany与动画库的任何想法？ HTML源代码是一个烂摊子这么难从那里

看来使用转换为动画，并增加了与CSS内容指令很要命的一fontaswsome图标弄清楚，还没有能够找到关于此的任何地方的任何信息。

Answer 1

使用CSS动画/转换，伪类如before或after来存储箭头。

如果你把transition: all 0.15s ease-out;设置为:hover状态（在这个例子中），我建议你学习CSS转换。

此外，您可能需要添加供应商特定的前缀（如-moz-或-webkit-），以便它可以在尚不支持它的浏览器版本中使用。 （如果你研究它的源代码，它会告诉你它是用css过渡完成的，只需选择一些并做出你的例子）。

这里的东西让你开始（悬停在代码段的“查看”链接）：

.thb-read-more { 
 
    display: inline-block; 
 
    float: none; 
 
    text-align: left; 
 
    float: left; 
 
    font-size: 14px; 
 
    width: 70px; 
 
    margin-left: 0px; 
 
    line-height: 1; 
 
    opacity: 1; 
 
    -moz-transition: all 0.15s ease-out; 
 
    transition: all 0.15s ease-out; 
 
} 
 
.thb-read-more:hover { 
 
    margin-left: -4px; 
 
} 
 
.thb-read-more::after { 
 
    content: "arrow"; 
 
    display: inline-block; 
 
    float: right; 
 
    width: 40px; 
 
    opacity: 0; 
 
    transition: all 0.15s ease-out; 
 
} 
 
.thb-read-more:hover::after { 
 
    content: "arrow"; 
 
    opacity: 1; 
 
    width: 20px; 
 
}

<a class="thb-read-more" href="#" rel="permalink">View</a>