感觉自己总是混淆css各种动画效果，所以再这里总结一下
1. transition，所在元素块样式变动时启动，可用于样式变动时产生过渡动画效果
语法
transition: property duration timing-function delay;
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2. tranform:用于平移，旋转，缩放，透视
语法
transform: none|transform-functions;
image.png
3. animation与@keyframe，animation与@keyframe是结合起来使用的，可以根据设置的秒数分段连续改变css样式，产生动画效果
语法：
animation: animationname duration timing-function delay iteration-count direction;
@keyframes animationname {keyframes-selector {css-styles;}}
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。值：0-100%,from（与 0% 相同）,to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。
4.@media:可以根据屏幕大小响应式改变样式
接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果
翻牌效果.gif
实现思想：当鼠标移到卡牌时，卡牌沿y轴旋转180度或360度（transform）,并且将旋转过程展现出来（transition展现过渡效果）
代码：
<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;//这个用来实现动画效果
overflow: hidden;
text-align: center;
}
img{
margin-top:100px;
}
.back{
transform: rotateY(-180deg);
}
.containTableStyle:hover .front{
/* 翻牌正反面关键 */
transform:rotateY(-180deg);//翻转180度
}
.containTableStyle:hover .back{
transform:rotateY(-360deg);
}
</style>
