小编Edu*_*rdó的帖子

如何防止css关键帧动画在页面加载时运行？

我有一个div,我在其中制作动画内容:

#container {
  position: relative;
  width: 100px;
  height: 100px;
  border-style: inset;
}
#content {
  visibility: hidden;
  -webkit-animation: animDown 1s ease;
  position: absolute;
  top: 100px;
  width: 100%;
  height: 100%;
  background-color: lightgreen;
}
#container:hover #content {
  -webkit-animation: animUp 1s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animUp {
  0% {
    -webkit-transform: translateY(0);
    visibility: hidden;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-100%);
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes animDown {
  0% {
    -webkit-transform: translateY(-100%);
    visibility: visible;
    opacity: 1;
  }
  100% {
    -webkit-transform: …

Run Code Online (Sandbox Code Playgroud)

css animation keyframe

Edu*_*rdó

2016 04-27

40
推荐指数

4
解决办法

3万
查看次数

使用列计数时,溢出的内容在除第一列之外的所有内容中完全消失,为什么？

当column-count在包装器中使用,并且包装器中的容器已经border-radius应用,并且容器中的内容溢出时,除了第一个列之外,内容完全消失在所有列中.

这是我的例子:https://jsfiddle.net/f4nd7tta/
红色半圆只在第一列中可见,为什么？

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}

Run Code Online (Sandbox Code Playgroud)

<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

Run Code Online (Sandbox Code Playgroud)

css css3 column-count css-multicolumn-layout

Edu*_*rdó

2017 10-02

26
推荐指数

2
解决办法

9252
查看次数