CSS3的出現帶來了許多令人激動的新特性，其中之一就是CSS3動畫。在其中，animate是一個非常強大的屬性，可以用來創建各種各樣的動畫效果。在本文中，我們將介紹animate屬性，并演示如何創建一個基于此屬性的按鈕。

.btn{
width: 120px;
height: 40px;
line-height: 40px;
background-color: #FF6347;
border-radius: 4px;
text-align: center;
font-size: 18px;
color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn:before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
transition: opacity .3s ease;
}
.btn:hover:before{
opacity: .1;
}
.btn:hover{
transform: translateY(-6px);
}

讓我們來看一下這個按鈕的CSS代碼。首先，我們為其設置了一些基本樣式（如寬度、高度、背景色等），然后將其設為相對定位，并設置了一個溢出隱藏的屬性，這意味著其子元素（這里的::before偽元素）不能溢出其邊框。

::before偽元素是一個非常有用的元素。它本質上是原始元素的第一個子元素，但不必通過HTML標記進行添加。我們使用這個元素來創建我們的動畫效果。在此示例中，我們將其設為純白色，并設置了一個透明度屬性。

在按鈕上懸停時，我們通過CSS動畫將透明度由零過渡到0.1，為其添加了一些淡出效果。我們還借助: hover偽類設置了按鈕的向上移動效果，讓它在用戶懸停時顯現更多的互動特性。

現在我們已經介紹了這個按鈕的基本實現原理，你可以自定義相應的CSS屬性，以實現你自己的按鈕動畫效果。