我正在尝试使一个框(或圆圈)从中心而不是左上方展开和收缩,但这对我来说不会发生。 任何人都可以请指教。

到目前为止,这是我的代码。

html

<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="css/expanding_box.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="BoxBreath"></div>
</body>

的CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.BoxBreath {
    top:300px;
    left:300px;
    position:relative;
    background-color:#C0F;
    width:100px;
    height:100px;
    transform-origin:50% 50%;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    animation-name: breath;
}
@keyframes breath {
    from {
        width:0px;
        height:0px;
        opacity:0;
    }
    to {
        width:100px;
        height:100px;
        opacity:1;
    }
}

提前谢谢了

===============>>#1 票数:0 已采纳

您可以使用比例尺来代替宽度和高度。 这样,您可以删除转换原点,并且它应该从中心移开。 另外,根据您的需要,最好将关键帧以百分比的形式分开,并将持续时间加倍:

@keyframes breath{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
}

使用其他关键帧的好处是,您可以将50%更改为65%,以获得更好的呼吸效果,或者添加另一个关键帧以使其在“呼吸”之间暂停。

这是所有内容,包括对不同浏览器的支持:

JSFiddle

.BoxBreath{
  position: relative;
  top: 300px;
  left: 300px;
  width: 100px;
  height: 100px;
  background-color: #C0F;
  animation: breath linear 2s infinite;
  -webkit-animation: breath linear 2s infinite;
  -moz-animation: breath linear 2s infinite;
  -o-animation: breath linear 2s infinite;
  -ms-animation: breath linear 2s infinite;
}

@keyframes breath{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
}

@-moz-keyframes breath{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
}

@-webkit-keyframes breath {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
}

@-o-keyframes breath {
  0% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
}

@-ms-keyframes breath {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  50% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
}

===============>>#2 票数:0

演示版

.BoxBreath {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background: #000;
    width: 50vw;
    height: 50vw;
}

  ask by Philip Terry translate from so

未解决问题?本站智能推荐:

3回复

HTML CSS中的关键帧动画不起作用

我正在播放一些动画,但是根本不起作用。 它必须是一个反弹动画。 这是我第一次使用它。 所以我希望我不会犯很严重的错误 这是我的.html文件: 这是我的.css文件: 我希望有人可以帮助我! 谢谢!
1回复

使用关键帧动画的纯CSS拒绝设置动画

我正在尝试创建一个纯CSS动画(使用计时器淡入/淡出),而不使用jQuery。 当我检查IE10和IE11时,动画不起作用。 在Firefox,Safari和Chrome上,它运行完美。 我如何才能在IE10和11中使用它? 这是我的HTML代码: 这是我的CSS代码:
3回复

CSS关键帧动画延迟

您好,由于某些原因,我似乎无法让表格中的颜色方块在不同时间出现。 我想它,所以第一种颜色出现然后消失,然后第二种颜色出现并消失,然后第三种颜色出现然后消失,依此类推。 我希望它如此顺序。 任何帮助,将不胜感激。
2回复

关键帧CSS动画

题 如果我有以下示例 我如何从中间( B )开始制作动画,然后转到A然后转到B ,最后转到C ,我举了一个例子,但是效果不好。 码 .container { display: block; } .container .line { display: block
1回复

关键帧CSS动画

您好,我正在尝试模拟翻转倒数计时器,但是在编写代码时,我发现两者之间存在差异: 和: 当我删除5%时,会出现问题,所以我想知道为什么会发生此问题。 这是我的代码: body { font: normal 11px "Helvetica Neue", Helv
1回复

CSS关键帧动画重叠

我正在尝试创建一个4x4表格,以一种颜色顺序点亮。 共有5种颜色,这些颜色在不同的表格列和行中依次点亮。 我设法获得一种颜色,但是当我尝试添加另一种关键帧动画时,是否将两个单元都更改为新颜色? 任何帮助将非常感激。 下面的代码仅显示一种颜色。 HTML: CSS:
1回复

重复CSS关键帧动画

我正在对SVG向量产生影响,并想重复播放动画 这个想法是 layer_1出现并消失 layer_2出现和消失 layer_3出现并消失 layer_4出现并消失 layer_5出现,等待3秒然后消失,然后再次重复所有操作 我到目前为止所拥有的
1回复

CSS动画关键帧重叠

我根本不擅长CSS动画。 我正在尝试为4个文本元素设置动画 标签使用https://codepen.io/nucliweb/pen/ymedj中的代码作为参考。 我希望他们彼此淡入淡出。 基本上是文本滑块。 因此我尝试这样做,但不幸的是无法获得第四名 表现得像第1个3。我
2回复

CSS动画延迟和关键帧

我对CSS动画的动画延迟有问题。 我有3张图片,我想幻灯片播放。 插图是,图像1到图像2需要15秒才能改变,图像2到图像3需要15秒才能改变,图像3要回到图像1需要30秒,在第一次循环之后,我想让幻灯片结束图像3使图像1到图像2仍然是15秒,图像2到图像3仍然是15秒,当图像3加载时,无需返
2回复

使用CSS的关键帧动画不流畅

我的网站内有一个关键帧动画; 它是非常基本的,但似乎有点“小故障”。 我很欣赏这可能是由于许多因素造成的,但是由于我没有CSS关键帧的丰富经验,所以我希望有人愿意查看我的代码并确定我是否做得正确? 这是我的代码: div {display:block;positio