在頁面加載時增長和縮小元素

Question

我試圖創建一個動畫，它生長一個html節點，然後在頁面加載時將其縮小到原始狀態（並非全部，但一個很好的轉換）。目標是爲對象創建一個氣球效果，然後將其縮回原始狀態

我一直在嘗試的解決方案是使用Bounce.js向我的元素添加一些關鍵幀動畫。我對包含元素執行一個操作，對子元素執行一個操作，兩者都具有相同的CSS屬性，但它不起作用。

下面是一個JS小提琴的鏈接，告訴你我一直在嘗試什麼。

對此有何祕訣是極大的讚賞:)

https://jsfiddle.net/

#container_one { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: 40%; 
 
    -webkit-animation: animation_one 3200ms linear both; 
 
    animation: animation_one 3200ms linear both; 
 
} 
 
#one_box { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: 40%; 
 
    background-color: black; 
 
    -webkit-animation: animation_two 1200ms linear both; 
 
    animation: animation_two 1200ms linear both; 
 
} 
 
@-webkit-keyframes animation_one { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.15% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.25% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    10.29% { 
 
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    14.32% { 
 
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    18.36% { 
 
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    22.39% { 
 
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    32.81% { 
 
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    43.22% { 
 
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    64.06% { 
 
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    84.98% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
} 
 
@keyframes animation_one { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.15% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.25% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    10.29% { 
 
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    14.32% { 
 
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    18.36% { 
 
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    22.39% { 
 
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    32.81% { 
 
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    43.22% { 
 
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    64.06% { 
 
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    84.98% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
} 
 
.animation-target { 
 
    -webkit-animation: animation_two 4200ms linear both; 
 
    animation: animation_two 4200ms linear both; 
 
} 
 
@-webkit-keyframes animation_two { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.47% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.57% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    31.65% { 
 
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    34.72% { 
 
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    37.79% { 
 
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    40.87% { 
 
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    48.81% { 
 
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    56.74% { 
 
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    72.62% { 
 
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    88.56% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
} 
 
@keyframes animation_two { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.47% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.57% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    31.65% { 
 
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    34.72% { 
 
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    37.79% { 
 
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    40.87% { 
 
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    48.81% { 
 
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    56.74% { 
 
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    72.62% { 
 
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    88.56% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
}

<h1>Brand Balloon</h1> 
 
<h3>A Social Experiment for the Digital Age</h3> 
 
<div id="container_one"> 
 
    <div id="one_box"></div> 
 
</div> 
 
<script src='js/app.js'></script>

Answer 1

您可以通過通過JavaScript onload事件上添加一個類觸發動畫。

您也可能需要運行動畫2次1次向前和一次向後，以便它返回原始狀態。 速記記錄的是：

animation : animation_one 3200ms  linear     both  2     alternate; 
animation : -name   -duration -timming-fucntion  -fill-mode -iteration-count -direction ; 

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

window.onload = function() { 
 
    document.getElementById('one_box').className = 'balloon'; 
 
    document.getElementById('container_one').className = 'balloonbis'; 
 
};

#container_one { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: 40%; 
 
} 
 
#one_box { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: 40%; 
 
    background-color: black; 
 
} 
 
/* animations and class */ 
 
.balloonbis { 
 
    -webkit-animation: animation_one 3200ms linear both 2 alternate; 
 
    animation: animation_one 3200ms linear both 2 alternate; 
 
} 
 
.balloon { 
 
    -webkit-animation: animation_two 1200ms linear both2 alternate; 
 
    animation: animation_two 1200ms linear both 2 alternate; 
 
} 
 
@-webkit-keyframes animation_one { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.15% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.25% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    10.29% { 
 
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    14.32% { 
 
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    18.36% { 
 
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    22.39% { 
 
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    32.81% { 
 
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    43.22% { 
 
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    64.06% { 
 
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    84.98% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
} 
 
@keyframes animation_one { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.15% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    6.25% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    10.29% { 
 
    -webkit-transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.543, 0, 0, 0, 0, 2.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    14.32% { 
 
    -webkit-transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.636, 0, 0, 0, 0, 3.636, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    18.36% { 
 
    -webkit-transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.157, 0, 0, 0, 0, 4.157, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    22.39% { 
 
    -webkit-transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.28, 0, 0, 0, 0, 4.28, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    32.81% { 
 
    -webkit-transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.062, 0, 0, 0, 0, 4.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    43.22% { 
 
    -webkit-transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(3.981, 0, 0, 0, 0, 3.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    64.06% { 
 
    -webkit-transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4.001, 0, 0, 0, 0, 4.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    84.98% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
} 
 
.animation-target { 
 
    -webkit-animation: animation_two 4200ms linear both; 
 
    animation: animation_two 4200ms linear both; 
 
} 
 
@-webkit-keyframes animation_two { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.47% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.57% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    31.65% { 
 
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    34.72% { 
 
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    37.79% { 
 
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    40.87% { 
 
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    48.81% { 
 
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    56.74% { 
 
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    72.62% { 
 
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    88.56% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
} 
 
@keyframes animation_two { 
 
    0% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.47% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    28.57% { 
 
    -webkit-transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(4, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    31.65% { 
 
    -webkit-transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(2.457, 0, 0, 0, 0, 2.457, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    34.72% { 
 
    -webkit-transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.364, 0, 0, 0, 0, 1.364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    37.79% { 
 
    -webkit-transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.843, 0, 0, 0, 0, 0.843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    40.87% { 
 
    -webkit-transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.72, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    48.81% { 
 
    -webkit-transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    56.74% { 
 
    -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1.019, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    72.62% { 
 
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    88.56% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
    100% { 
 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
 
    } 
 
}

<h1>Brand Balloon</h1> 
 
<h3>A Social Experiment for the Digital Age</h3> 
 
<div id="container_one"> 
 
    <div id="one_box"></div> 
 
</div>

DEMO