CSS3：过渡动画及关键帧动画-案例一：扑克牌的翻转

一、过渡动画及关键帧动画

本文大致介绍了CSS3中的技术之一：动画，因为我也是学习者，这只是我自己的观点，如有错误，请指出。废话不多说，开始步入正题：
想必大家都看过动画片：猫和老鼠，其剧情幽默轻松，让人印象深刻。就像灰太狼永远都吃不到羊，汤姆也斗不过杰瑞。那么这么好看的动画片是怎么拍出来的呢？是直接实拍吗？想必大家都没深究。今天就讲讲这些动画是怎么呈现在我们面前的。
我们所看到的动画是一帧一帧的画面，当连起来播放，就是一个完整的动画了。那么CSS3中的动画是什么呢？CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果
说道动画的动，我们不得不说到变形操作，其关键字为：transform，其属性有：

（这里只讲常用的属性）

过渡动画关键字：transition 其属性有：

。
关键帧动画关键字：@keyframes、animation

那么我们怎么实现CSS3中的动画呢？这里面涉及到过渡动画和帧动画，这其实很简单，一共分为两个步骤：
1.写剧本
2.调用剧本
下面提供相关代码：

1.写剧本：@keyframes 自定义名称{
from {
过渡动画代码；
}
to {
过渡动画代码；
}
}
或者
@keyframes 自定义名称{
0%{
过渡动画代码； 或者相关操作
}
100% {
过渡动画代码； 或者相关操作
}
}

2.调用剧本
animation: 自定义名称 5s linear infinite;
代码解释：这的5s是剧本的运行时间 linear：匀速运行 运行次数： infinite（无限次）

下面用案例来综合讲解动画过渡的用法： 本次讲的案例是扑克牌的翻转，话不多说，先上效果：

由于视频不好长传，无法给大家展示动态效果，这里我就讲述一下，将鼠标悬停在扑克牌上，扑克牌会自动展开，移开鼠标，扑克牌会自动复原

下面代码提供了样式：

    

        
"img/pk1.png" alt="">
        
"img/pk2.png" alt="">
        
"img/pk1.png" alt="">
        
"img/pk2.png" alt="">
        
"img/pk1.png" alt="">
        
"img/pk2.png" alt="">
    

大家对样式或者有疑问的可以提出来，我会及时解答或更正，谢谢大家！