CSS3实现徽章翻转效果

1. 需求

利用下面两张图片素材，实现徽章由小变大，从反面翻转到正面，最终显示出徽章上的图案的动画效果。

2. 分析

(1) 一个空白的徽章呈现为如图所示：

transform: rotateX(58deg) rotateY(-135deg);

(2) X由后仰的58度恢复到0度，Y向右翻转135度回到0度，宽度变大

transform: rotateX(0deg) rotateY(0deg);

(3) 在动画的最后一段时间，缓慢显示出有画面的徽章图片

将有徽章内容的图片绝对定位到空白徽章同样的位置，开始设置不可见opacity: 0，在徽章发生翻转时，此图片也跟着父容器一起翻转，在动画的最后一段时间，渐进将opacity设置为1，显示出来。

(4) 动画最后一帧的效果，最终停留在页面上

animation-fill-mode: forwards;

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。默认值为none。

值	描述
none	不改变默认行为
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

3. 实现

<div class="game1_cuccess_badge">
<div class="badge-img-container">
<img src="img/badge-blank.png" width="100%">
<img class="img-real" src="img/success-badge.png" width="100%">
</div>
</div>

/*忽略前缀，完整代码参见最后*/
.game1_cuccess_badge{
width: 100%;
text-align: center;
}
.img-real{
position: absolute;
left: 0;
top: 0;
animation: animationBadgeReal ease-in 1s;
animation-fill-mode: forwards;
}
.badge-img-container{
display: inline-block;
width: 37%;
animation: animationBadge ease-in .6s;
animation-fill-mode: forwards;
}
/*animation for blank badge  */
@keyframes animationBadge{
0% {
width: 5%;
-webkit-transform: rotateX(58deg) rotateY(-135deg);
transform: rotateX(58deg) rotateY(-135deg);
}
100% {
width: 37%;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}

/*animation for badge image */
@keyframes animationBadgeReal{
0% {
opacity: 0
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}

/*完整CSS*/
.game1_cuccess_badge{
width: 100%;
text-align: center;
}
.img-real{
position: absolute;
left: 0;
top: 0;
animation: animationBadgeReal ease-in 1s;
-webkit-animation: animationBadgeReal ease-in 1s;
-moz-animation: animationBadgeReal ease-in 1s;
-o-animation: animationBadgeReal ease-in 1s;
-ms-animation: animationBadgeReal ease-in 1s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
}
.badge-img-container{
display: inline-block;
width: 37%;
animation: animationBadge ease-in .6s;
-webkit-animation: animationBadge ease-in .6s;
-moz-animation: animationBadge ease-in .6s;
-o-animation: animationBadge ease-in .6s;
-ms-animation: animationBadge ease-in .6s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
}
/*animation for badge  */
@keyframes animationBadge{
0% {
width: 5%;
-webkit-transform: rotateX(58deg) rotateY(-135deg);
transform: rotateX(58deg) rotateY(-135deg);
}
100% {
width: 37%;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}
@-webkit-keyframes animationBadge{
0% {
width: 5%;
-webkit-transform: rotateX(58deg) rotateY(-135deg);
transform: rotateX(58deg) rotateY(-135deg);
}
100% {
width: 37%;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}

@-moz-keyframes animationBadge {
0% {
width: 5%;
-webkit-transform: rotateX(58deg) rotateY(-135deg);
transform: rotateX(58deg) rotateY(-135deg);
}
100% {
width: 37%;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}

@-o-keyframes animationBadge {
0% {
width: 5%;
-webkit-transform: rotateX(58deg) rotateY(-135deg);
transform: rotateX(58deg) rotateY(-135deg);
}
100% {
width: 37%;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}

@-ms-keyframes animationBadge {
0% {
width: 5%;
-webkit-transform: rotateX(58deg) rotateY(-135deg);
transform: rotateX(58deg) rotateY(-135deg);
}
100% {
width: 37%;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}
/*animation for badge image */
@keyframes animationBadgeReal{
0% {
opacity: 0
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes animationBadgeReal{
0% {
opacity: 0
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}

@-moz-keyframes animationBadgeReal {
0% {
opacity: 0
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}

@-o-keyframes animationBadgeReal {
0% {
opacity: 0
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}

@-ms-keyframes animationBadgeReal {
0% {
opacity: 0
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}