感覺自己總是混淆css各種動畫效果，所以再這里總結(jié)一下
1. transition，所在元素塊樣式變動時啟動，可用于樣式變動時產(chǎn)生過渡動畫效果
語法
transition: property duration timing-function delay;
| transition-property | 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規(guī)定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規(guī)定速度效果的速度曲線。 |
| transition-delay | 定義過渡效果何時開始。 |
2. tranform:用于平移，旋轉(zhuǎn)，縮放，透視
語法
transform: none|transform-functions;
3. animation與@keyframe，animation與@keyframe是結(jié)合起來使用的，可以根據(jù)設(shè)置的秒數(shù)分段連續(xù)改變css樣式，產(chǎn)生動畫效果
語法：
animation: animationname duration timing-function delay iteration-count direction;
@keyframes animationname {keyframes-selector {css-styles;}}
animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。
animation-duration 規(guī)定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function 規(guī)定動畫的速度曲線。
animation-delay 規(guī)定在動畫開始之前的延遲。
animation-iteration-count 規(guī)定動畫應(yīng)該播放的次數(shù)。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動畫。
animationname 必需。定義動畫的名稱。
keyframes-selector 必需。動畫時長的百分比。值：0-100%,from（與 0% 相同）,to（與 100% 相同）
css-styles 必需。一個或多個合法的 CSS 樣式屬性。
4.@media:可以根據(jù)屏幕大小響應(yīng)式改變樣式
接下來利用transition和transfrom實現(xiàn)一個簡單的翻牌效果,先看效果
實現(xiàn)思想：當鼠標移到卡牌時，卡牌沿y軸旋轉(zhuǎn)180度或360度（transform）,并且將旋轉(zhuǎn)過程展現(xiàn)出來（transition展現(xiàn)過渡效果）
代碼：
<template>
<div class='containTableStyle'>
<div class='front'>
<img src='https://tse1-mm.cn.bing.net/th/id/OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK?w=332&h=186&c=7&r=0&o=5&pid=1.7'>
</div>
<div class='back'>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.k-3spJAwvrrQFay-iJxk2QHaEK?w=333&h=187&c=7&r=0&o=5&pid=1.7">
</div>
</div>
</template>
<script>
export default ({
})
</script>
<style>
.containTableStyle{
width:300px;
height:500px;
position:relative;
perspective: 500;
left:500px;
top:100px;
}
.front,.back{
position:absolute;
top:0;
left:0;
backface-visibility: hidden;//當元素移到反面時元素不可見
width:100%;
height:100%;
box-shadow: rgba(50,50,50,0.2) 0 0 15px;
transition:all 1.5s ease-in-out;//這個用來實現(xiàn)動畫效果
overflow: hidden;
text-align: center;
}
img{
margin-top:100px;
}
.back{
transform: rotateY(-180deg);
}
.containTableStyle:hover .front{
/* 翻牌正反面關(guān)鍵 */
transform:rotateY(-180deg);//翻轉(zhuǎn)180度
}
.containTableStyle:hover .back{
transform:rotateY(-360deg);
}
</style>
