标签: css-animations

带有闪烁边框的表格单元格

我正在制作一个用户界面，我需要在其中突出显示表格中的单元格。我已经为别的东西使用了颜色，所以我需要使用边框。我创建了 css 来将边框更改为虚线，但这并没有突出显示。我想知道是否有任何方法可以为边框设置动画，以便它们闪烁或圆形（典型的虚线边框动画）。我尝试了@keyframes 和动画，但失败了。

我很高兴用 javascript 来做，但我不能使用 jQuery 或任何其他框架。

如果有人对突出显示单元格有任何其他建议，那也可能有所帮助。

我使用的测试代码是这样的：

<table class="t">
    <tr>
        <td class="t">1</td>
        <td class="t top">2</td>
        <td class="t">3</td>
    </tr>
    <tr>
        <td class="t left">4</td>
        <td class="t middle">5</td>
        <td class="t right">6</td>
    </tr>
    <tr>
        <td class="t">7</td>
        <td class="t bottom">8</td>
        <td class="t">9</td>
    </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

CSS：

table.t {
    border-collapse: collapse;
    border:1px;
    table-layout:fixed;
}

td.t {
    border: 1px solid black;
    width: 50px;
}

td.top {
    border-bottom: 1px dashed black;
}
td.left {
    border-right: 1px dashed black;
}
td.right {
    border-left: 1px dashed black; …

Run Code Online (Sandbox Code Playgroud)

javascript css css-animations

2
推荐指数

1
解决办法

4531
查看次数

CSS 过渡高度和填充

我有一个 ReactJS 固定高度的子组件，我想使用transition: height.

.slider-enter {
    height: 0;
}

.slider-enter.slider-enter-active {
    height: 3pc;
    transition: height 1s ease-in;
}

.slider-leave {
    height: 3pc;
}

.slider-leave.slider-leave-active {
    height: 0;
    transition: height 1s ease-in;
}

Run Code Online (Sandbox Code Playgroud)

这很有效，但是有问题的组件也有 aborder-top和 some padding-top。这不包括在高度过渡中，因此过渡不平滑。

例如：在“输入”时，边框和填充立即变得可见，然后组件的其余部分按预期显示。

我的问题：

您如何在transition: height规则中包含填充和边框的高度，或者是否有任何其他方法可以消除此问题？

任何 post-jsbin 世界的源代码副本：

反应组件：

var Box = React.createClass({
  getInitialState: function () {
      return {
          open: false
      };
  },
  render: function () {
    var stuffs = this.state.open ? <div className="sub" /> : …

Run Code Online (Sandbox Code Playgroud)

javascript css css-animations reactjs

2
推荐指数

1
解决办法

4824
查看次数

重置背景颜色 CSS

我正在开发一个项目，我应该在其中制作 div flash 的特定部分，（或只闪烁一次）

HTML ：

<p  style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink" >Current Price</p>

Run Code Online (Sandbox Code Playgroud)

和 CSS

<style>
  #divtoBlink{
    background: #008800;
    animation-duration: 1000ms;   
    animation-name: blink;
    animation-iteration-count: 1;
    animation-direction: alternate;      
  }

  @keyframes blink {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
</style>

Run Code Online (Sandbox Code Playgroud)

它闪烁，颜色变为绿色。但颜色保持绿色。我想background: #008800;再次将重置为白色或透明。是否有我可以使用的属性或调整？任何帮助表示赞赏。

html css css-animations

2
推荐指数

1
解决办法

3996
查看次数

淡出，暂停，然后淡入元素 - 仅限 CSS

我正在尝试淡出一个元素，保持该元素淡出 5 秒，然后淡入该元素。我试图仅使用 CSS 而不是 jQuery 来实现这一点。

目前我已经设置了两个元素在 2 秒后开始淡入淡出，淡入淡出持续时间为 2 秒，然后在持续时间结束后立即重新出现。

这是一个小提琴。

和代码：

CSS：

.hideMe1{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2s; /* Pause before fade */
    -webkit-animation-delay:2s; /* Safari and Chrome */
    -webkit-animation-fill-mode: backwards;  /* End by showing the content */
} 

.hideMe2{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2.5s; /* Pause before fade */
    -webkit-animation-delay:3s; /* Safari and …

Run Code Online (Sandbox Code Playgroud)

html css css-animations

2
推荐指数

1
解决办法

4255
查看次数

滚动到 angular2 时动画进入视图

我找到了一个库，用于在滚动到 ( aos )时将元素动画化到视图中，但它似乎没有任何 angular2 绑定可供使用。有谁知道如何在 angular2 中完成这样的事情，或者至少将 aos 配置为在 angular2 中工作？

谢谢你的帮助

css-animations angular

2
推荐指数

1
解决办法

3639
查看次数

具有动画延迟的元素在使用纯 CSS3 关键帧（无 JS）淡入之前短暂出现

所以我想在我的页眉中有一些元素，它们使用 CSS3 关键帧在页面加载时向上滑动和淡入。虽然动画本身运行良好，但具有延迟的元素会在动画之前以最终状态出现一瞬间。我目前不知道任何 JavaScript，所以我希望有一个纯粹在 HTML/CSS 中的解决方案。可以做到吗？

* {
  font-family: 'Varela', sans-serif;
}

body {
  padding: 0;
  margin: 0;
  background-color: rgb(90, 120, 240);
}

a {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

/***************************
HEADER
***************************/

.header-banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  height: 250px;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
  -o-animation: slide-in 1s;
  animation: slide-in 1s;
  padding: 0 0 60px 0;
}

.header-banner h1,
.header-banner h2,
.header-banner a {
  font-family: 'Varela', sans-serif;
  color: white; …

Run Code Online (Sandbox Code Playgroud)

css keyframe css-animations

2
推荐指数

1
解决办法

3083
查看次数

使用 css 动画更改悬停时的圆形背景

我有一个圆圈，它的背景颜色设置为红色，我想在悬停时使用 css 动画更改其背景，我该怎么做？这是我的代码：

.circle{
  background-color: red;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  }

Run Code Online (Sandbox Code Playgroud)

<html>
<body>
<div class="circle"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

html css geometry hover css-animations

2
推荐指数

1
解决办法

1万
查看次数

悬停时图像滚动

我想在 div 中制作一个图像以在悬停时向下滚动。这部分正在发挥作用。

另外，如果图像更长，我需要让它滚动更长的时间，因此我试图在过渡内使用 calc，但它不起作用。

这是我的代码：

.preview {
  position: relative;
  width: 75%;
  height: 90vh;
  overflow: hidden;
  border: 1px solid red;
  background-color: transparent;
}

.previewimg {
  width: 100%;
  height: 100%;
  top: 0;
  background-image: url(https://www.n2odesigns.com/wp-
 content/uploads/Projema-Website-Preview-2016.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-y: 0;
  transition: all calc(0.02s * height) ease-in-out;
}

.previewimg:hover {
  background-position-y: 100%;
  height: 100%;
  transition: all calc(0.02s * height) ease-in-out;
}

Run Code Online (Sandbox Code Playgroud)

<div class="preview">
  <div class="previewimg"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

如果有其他更好的方法可以做到这一点，我也可以使用它。

css transition hover css-transitions css-animations

2
推荐指数

1
解决办法

6604
查看次数

SVG。使用 css 反转图像。将图像保持在同一位置

这是一个代码笔示例https://codepen.io/yury-leonov/pen/rZxxQE

示例中的代码：

$(".example").on("click", function(e){
  $(e.target).toggleClass("reverse");
})

Run Code Online (Sandbox Code Playgroud)

.reverse{
    transform: scaleX(-1);
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 700px;height: 700px;margin-left: 100px">
    <svg viewBox="-200 0 700 700">
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="150px" x="50", y="50"/>
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="100px" x="100", y="0"/>
      <!--x value can be changed during time-->
    </svg>
</div>

Run Code Online (Sandbox Code Playgroud)

问题：

箭头从其位置移动

预期的：

箭头反了。留在同一个地方。仅基于 css 执行（无需 js 计算最终 x 值并进行设置）

PS：

translateX(-???px) 的硬编码不是一个选项，因为可能有许多对象应该被反转。

css svg image css-animations

2
推荐指数

1
解决办法

746
查看次数

反转css关键帧动画

我已经使用关键帧为 svg 路径编写了一个 css 动画

path {
  animation: anim 1s linear;
  animation-fill-mode: forwards;
}

@keyframes anim {
  50% {
    d: path('M20 20 L 20 20');
  }
  100% {
    d: path('M10 10 L 30 30');
  }
}

Run Code Online (Sandbox Code Playgroud)

<path class="top" d="M10 10 L 30 10" stroke-width="2" stroke="black" fill="transparent" />

Run Code Online (Sandbox Code Playgroud)

如果您单击 svg，您可以看到正在运行的动画。现在，如果您再次单击，我希望它动画到其原始状态。我试过添加

transition: all 1s ease-out;

Run Code Online (Sandbox Code Playgroud)

和

animation-direction: alternate;

Run Code Online (Sandbox Code Playgroud)

但是仍然没有动画回到其初始状态。

所以问题是，我怎样才能动画回来？

css svg keyframe css-animations

2
推荐指数

1
解决办法

133
查看次数

标签统计

css-animations ×10

css ×9

html ×3

svg ×2

css-transitions ×1

«
1
…
73
74
75
76
77
…
86
»