如何創建CSS3反彈效果

Question

我想在不使用任何第三方代碼或JavaScript的情況下在動畫結束時創建反彈效果。我不知道如何使用純CSS來做到這一點。

這是我到目前爲止有：

HTML：

<div></div> 
<div></div> 
<div></div> 

CSS：

div { 
    background: tomato; 
    width: 100px; 
    height: 100px; 
    margin-bottom: 10px; 
    transition: transform 0.3s ease-in; 
    transform-origin: top left; 
} 
div:hover { 
    -webkit-transform: scale3d(5, 5, 5); 
    transform: scale3d(5); 
} 

DEMO

Answer 1

如果你需要的是一個非常簡單的反彈，很容易只需將ease-in的轉換函數更改爲其他值，如cubic-bezier即可。

該反彈將是一個cubic-bezier函數的例子

cubic-bezier(0.175, 0.885, 0.32, 1.275) 

完整的例子：

div { 
 
    background: tomato; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-bottom: 10px; 
 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
 
    transform-origin: top left; 
 
} 
 
div:hover { 
 
    -webkit-transform: scale3d(5, 5, 5); 
 
    transform: scale3d(5); 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

您可以在easings.net找到其他漸變效果的幾個例子，或在cubic-bezier.com的全立方貝塞爾編輯器。

Answer 2

我阿尼馬特的粉絲e.css

http://daneden.github.io/animate.css/

巧合的是，所述第一動畫是彈跳。

你可以從css文件中提取你需要的代碼。

使用animate.css框架我已經提取其反彈的動畫，並創建了下面一個片段：

@-webkit-keyframes bounce { 
 
    0%, 20%, 53%, 80%, 100% { 
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    -webkit-transform: translate3d(0,0,0); 
 
    transform: translate3d(0,0,0); 
 
    } 
 

 
    40%, 43% { 
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -30px, 0); 
 
    transform: translate3d(0, -30px, 0); 
 
    } 
 

 
    70% { 
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -15px, 0); 
 
    transform: translate3d(0, -15px, 0); 
 
    } 
 

 
    90% { 
 
    -webkit-transform: translate3d(0,-4px,0); 
 
    transform: translate3d(0,-4px,0); 
 
    } 
 
} 
 

 
@keyframes bounce { 
 
    0%, 20%, 53%, 80%, 100% { 
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    -webkit-transform: translate3d(0,0,0); 
 
    transform: translate3d(0,0,0); 
 
    } 
 

 
    40%, 43% { 
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -30px, 0); 
 
    transform: translate3d(0, -30px, 0); 
 
    } 
 

 
    70% { 
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -15px, 0); 
 
    transform: translate3d(0, -15px, 0); 
 
    } 
 

 
    90% { 
 
    -webkit-transform: translate3d(0,-4px,0); 
 
    transform: translate3d(0,-4px,0); 
 
    } 
 
} 
 

 
.bounce { 
 
    -webkit-animation-name: bounce; 
 
    animation-name: bounce; 
 
    -webkit-transform-origin: center bottom; 
 
    transform-origin: center bottom; 
 
} 
 

 
.animated { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 

 
div{background:red; padding:50px;}

<div class="bounce animated">bounce</div>