CSS3動畫隨機是指在同一元素上使用多種不同的過渡或動畫效果達到隨機效果的方法。這種效果使用HTML和CSS創建，是一種比JavaScript更加輕量的實現方式。

div {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
}
div:hover {
animation: random-animation 2s ease-in-out;
}
@keyframes random-animation {
0% {transform: translateX(0);}
20% {transform: translateX(50px);}
40% {transform: translateY(50px);}
60% {transform: rotate(180deg);}
80% {transform: scale(1.5);}
100% {transform: translate(-50px, -50px);}
}

上面的代碼是一個簡單的隨機動畫實例。當鼠標懸停在元素上時，該元素將應用一個 2 秒的隨機動畫。在樣式表中，我們使用 @keyframes 關鍵字來定義動畫，然后使用 animation 屬性將其應用到元素上。在這個關鍵幀中，我們定義了多個動畫狀態，包括旋轉、縮放和平移。

為了使動畫效果更加隨機，我們可以定義多個隨機動畫，然后在偽隨機的情況下將它們應用到不同的元素上。要實現這個效果，我們需要使用 JavaScript 生成隨機數然后將其應用到元素上：

var animations = ['rotate', 'translate', 'scale'],
randomAnimation = animations[Math.floor(Math.random() * animations.length)],
elements = document.querySelectorAll('.random-animation');
elements.forEach(function(element) {
element.style.animationName = randomAnimation;
});

上面的代碼使用 JavaScript 定義了一個包含不同動畫的數組，然后使用了 Math.random() 和數組長度生成隨機數以選擇一個隨機的動畫。最后，我們使用 document.querySelectorAll() 選擇所有帶有 'random-animation' 的類的元素，并將隨機動畫的名稱應用到每個元素的 animation-name 屬性上。

上述代碼是可以定制的，可以替換掉不同的隨機動畫效果以生成不同的隨機效果。通過使用 CSS3動畫隨機和JavaScript來實現，我們可以創造出無限變化的動畫效果，帶來更加美妙的用戶體驗和視覺震撼。