转换css时模糊文本

Question

我有以下代码，我正在尝试使用纯css创建翻转卡动画。为什么当我有我的翻转动画css代码时，文本和图像会变得模糊，但是当我取出翻转代码时，文本会恢复到漂亮和锐利？反正有没有解决这个问题？有没有人有任何解决方案？什么都有帮助，谢谢。 （我在谷歌浏览器中查看此内容）。

使用flip css

＆＃13;

＆＃13;

<div class="flip-container">
	<div class="flipper">
		<div class="front">
<div class="container">
  <div class="left-div">
      <p class="content-name">title</p>
      <p class="content-title">name</p>
    <p class="content-description">Sed ut perspiciatis unde omnis iste natus <br/> error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    <a href="#" class="content-link">Link</a>
  </div>
  <div class="right-div">
  </div>
  </div>
    </div>
    <div class="back">
      :p
		</div>
	</div>
</div>

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

html, body { 
  height: 100%;
  width: 100%; 
  margin: 0; 
  padding: 0; 
  background-color:#eaeaea;}

.container {
  width:900px;
  height:550px;
  background-color:white;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.right-div {
  width:540px;
  height:550px;
  background-image:url();
  transform:scale(1);
  background-position: -170px 0px; 
  background-size:cover;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto;}

.left-div {
  width:323px;
  height:550px;
  background-color:white;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  margin: auto;}

.content-name {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 10px;
    text-transform: uppercase;
    color: #7E7E7E;    
    font-weight: 700;
    margin-top:160px;
    margin-left:40px;}

.content-title {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #2C2C2C;
    margin-top:10px;
    margin-left:40px;}

.content-description {
    margin-top: -20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #7e7e7e;
    line-height: 22px;
    margin-left:40px;}

.content-link {
    position:absolute;
    margin-top:20px;
    color: #2C2C2C;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    margin-left:40px;}

＆＃13;

＆＃13;

＆＃13;

没有翻转css

＆＃13;

＆＃13;

<div class="flip-container">
	<div class="flipper">
		<div class="front">
<div class="container">
  <div class="left-div">
      <p class="content-name">title</p>
      <p class="content-title">name</p>
    <p class="content-description">Sed ut perspiciatis unde omnis iste natus <br/> error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    <a href="#" class="content-link">Link</a>
  </div>
  <div class="right-div">
  </div>
  </div>
    </div>
    <div class="back">
      :p
		</div>
	</div>
</div>

＆＃13;

abstract class List[T] {
  def reduceRight(op: (T, T) => T): Either[String, T] = this match {
    case Nil => Left("reduce on empty list")
    case x => Right(x)
    case x::xs => Right(op(x, xs, reduceRight(op)))
  }
}

＆＃13;

＆＃13;

＆＃13;