感覺自己總是混淆css各種動(dòng)畫效果像樊，所以再這里總結(jié)一下
1. transition，所在元素塊樣式變動(dòng)時(shí)啟動(dòng)旅敷，可用于樣式變動(dòng)時(shí)產(chǎn)生過渡動(dòng)畫效果
語法
transition: property duration timing-function delay;
| transition-property | 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱生棍。 |
| transition-duration | 規(guī)定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規(guī)定速度效果的速度曲線媳谁。 |
| transition-delay | 定義過渡效果何時(shí)開始涂滴。 |
2. tranform:用于平移，旋轉(zhuǎn)晴音，縮放柔纵，透視
語法
transform: none|transform-functions;
3. animation與@keyframe，animation與@keyframe是結(jié)合起來使用的锤躁，可以根據(jù)設(shè)置的秒數(shù)分段連續(xù)改變css樣式搁料，產(chǎn)生動(dòng)畫效果
語法：
animation: animationname duration timing-function delay iteration-count direction;
@keyframes animationname {keyframes-selector {css-styles;}}
animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。
animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間系羞，以秒或毫秒計(jì)郭计。
animation-timing-function 規(guī)定動(dòng)畫的速度曲線。
animation-delay 規(guī)定在動(dòng)畫開始之前的延遲觉啊。
animation-iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫沈贝。
animationname 必需杠人。定義動(dòng)畫的名稱。
keyframes-selector 必需。動(dòng)畫時(shí)長的百分比嗡善。值：0-100%,from（與 0% 相同）,to（與 100% 相同）
css-styles 必需辑莫。一個(gè)或多個(gè)合法的 CSS 樣式屬性。
4.@media:可以根據(jù)屏幕大小響應(yīng)式改變樣式
接下來利用transition和transfrom實(shí)現(xiàn)一個(gè)簡單的翻牌效果,先看效果
實(shí)現(xiàn)思想：當(dāng)鼠標(biāo)移到卡牌時(shí)罩引，卡牌沿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;//當(dāng)元素移到反面時(shí)元素不可見
width:100%;
height:100%;
box-shadow: rgba(50,50,50,0.2) 0 0 15px;
transition:all 1.5s ease-in-out;//這個(gè)用來實(shí)現(xiàn)動(dòng)畫效果
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>
