那些遇到过的问题

标签: css-animations

如何优化CSS动画(缩放,旋转,模糊)

以下HTML示例包含两张图片; 一个背景,另一个是对象.两者都使用缩放和旋转动画.在全高清显示器上,它往往是不连贯的.当你在Firefox中观察它的性能时它大约需要20 fps.

首先我使用jQuery; 提高性能我选择了CSS,但它仍然不完美.为了重现问题,请转到全屏.我怎样才能让它变得更好？

.html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #121212;
}

.maincontainer {
  width: 100%;
  padding-bottom: 100%;
  position: fixed;
  overflow: hidden;
}

.bg {
  background-image: url(http://wallpaper-gallery.net/images/beautiful-pictures-of-nature/beautiful-pictures-of-nature-2.jpg);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: -99;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.bg2 {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: -99;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
} …
Run Code Online (Sandbox Code Playgroud)

html css css-animations

Mil*_*los
2019 11-08
10
推荐指数
2
解决办法
1052
查看次数

3D立方体中的css3变换原点问题

我创建了css-cube并将其旋转:hover.

但它的旋转是基于立方体的一面!

我想从它的中心旋转它,就像在这个例子中一样.我正在尝试属性但没有得到理想的结果.

我也尝试在一个立方体内放置一个中间飞机,但在那种情况下悬停不起作用!

.contain {
    width: 300px;
    height: 300px;
    -webkit-perspective: 500px;
    perspective: 500px;
    position: absolute;
}
.main {
    position:relative;
    width:100px;
    height:100px;
    margin:100px 100px;
    background:#07a;
    overflow:visible;
    transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.main:hover{
    transform:rotateY(180deg);
}

.top, .right, .left, .bottom,.lid{
    position:absolute;
    width:100px;
    height:100px;
    z-indexd:999;
    transition:  all 1s ease;
}
.top {
    background:crimson;
    top:-100px;
    transform-origin : 50% 100%;
    transform:rotateX(-90deg); …
Run Code Online (Sandbox Code Playgroud)

html css css3 css-transforms css-animations

eir*_*ios
2014 12-19
9
推荐指数
1
解决办法
2199
查看次数

如何使用css3为div设置动画

我有以下代码: 

$('.div-1').on('click', function() {
  $('.block').addClass('animated');
});
$('.div-2').on('click', function() {
  $('.block2').addClass('animated');
});
Run Code Online (Sandbox Code Playgroud) 
html,
body {
  height: 100%;
}
.div-1 {
  display: inline-block;
  padding: 40px;
  background: tomato;
}
.div-2 {
  display: inline-block;
  padding: 40px;
  background: tan;
}
.block2 {
  background: green;
}
.animated {
  -webkit-animation: animateThis 0.2s ease;
  animation: animateThis 0.2s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.block {
  background: red;
}
@-webkit-keyframes animateThis {
  0% {
    height: 0;
    width: 0;
  }
  100% {
    height: 100%;
    width: 100%;
  }
}
keyframes animateThis …
Run Code Online (Sandbox Code Playgroud)

html css jquery css3 css-animations

Sha*_*aka
2015 04-28
9
推荐指数
2
解决办法
383
查看次数

Chrome动画按钮缺失

我正试图找到一种方法来专门调试Chrome中的CSS动画.我下载了最新版本的Chrome Canary,因为它应该包含此功能.多个来源确认样式选项卡下的DevTools中应该有一个按钮.

在此输入图像描述

但是,按钮根本就不存在.它也不适用于常规Chrome的最新版本,也不适用于我的同事Chrome.有什么设置我不见了？

很难找到这个问题的好来源,这就是为什么我要求你们帮忙:)

css google-chrome google-chrome-devtools css-animations

FvB*_*FvB
2016 11-14
9
推荐指数
2
解决办法
2218
查看次数

当使用具有matrix3d值的初始关键帧时,用于变换的CSS动画无法正常工作

我需要在div上为属性执行动画scaleZ()并translateZ()使用CSS动画.

当transform属性的动画中的初始和最后一个关键帧值具有类似的"格式" 时,以下代码可以正常工作:

  • 0%是 transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
  • 100%是 transform: rotateY(179deg) scaleZ(2) translateZ(200px);

        console.clear();
        document.addEventListener('DOMContentLoaded', () => {
            let content1 = document.querySelector('#content1');
            var computedTransform = window.getComputedStyle(content1).transform;
            console.log(computedTransform);

        });
Run Code Online (Sandbox Code Playgroud) 
        @-webkit-keyframes animation {
            0% {
                /*works*/
                -webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                /*issue*/
                /*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        @keyframes …
Run Code Online (Sandbox Code Playgroud)

html javascript css css3 css-animations

Gib*_*boK
2017 01-11
9
推荐指数
1
解决办法
551
查看次数

如何用@ angular/animations动画ScrollTop？

我正在尝试从Material.io复制此动画:

卡片动画

要像上面示例中第一张卡片上的点击一样导航高度很简单.只是动画高度属性.问题在于点击第二张卡然后将其他卡推开.

对此的一个解决方案是使用滚动来模拟事物被推开的效果.因此,当您单击该项目时,它通过设置高度动画使其更高,但同时也滚动视图.

我的问题:我似乎无法弄清楚如何使用动画滚动@angular/animations.我不能使用style({ scrollTop: 100 }),它只允许根据文档的 CSS属性.

我该如何实现这一目标？如果我animate()出于维护原因可以将其作为动画的一部分来进行(将整个动画保留在代码中的1个位置),那将是很好的,但如果只能使用单独的方法,我猜这也是可以接受的.

javascript css-animations angular angular-animations

Mar*_*ind
2017 09-01
9
推荐指数
1
解决办法
2422
查看次数

CSS旋转,翻译,缩放动画Bug

我使用关键帧为HTML/CSS3创建了一个动画.

动画是一个图标,应该旋转并围绕其中心点缩放.

动画可以在Chrome中使用,但在Safari中,直到动画结束才能正常翻译.

在这里 - 捕捉到位置 - 在野生动物园:

在此输入图像描述

这里是 - 平滑地动画到位置 - 在chrome中:

在此输入图像描述

这是动画CSS:

@keyframes icon-animation {
    0% {
        left: 188.5px;
        top: 187.5px;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
        width: 286.84px;
        height: 233.81px;
    }
    16.6667% {
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
    }
    50% {
        left: 188px;
        top: 188.5px;
    }
    66.6667% {
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: 50% 50%;
        width: 200px;
        height: 163px;
    }
    100% {
        left: 188px;
        top: 188.5px;
        transform: translate(-50%, -50%) rotate(0deg); …
Run Code Online (Sandbox Code Playgroud)

safari css-animations

C4 *_*vis
2018 09-01
9
推荐指数
1
解决办法
490
查看次数

使用计算相对于宽度的动画持续时间？

当动态添加元素并且在页面加载之前不知道其宽度时，是否可以animation-duration使用 相对于元素的宽度进行设置？calc

我有几个“新闻行情”，其中的文本使用此关键帧从右到左无限水平翻译：

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}
Run Code Online (Sandbox Code Playgroud)

还有这个CSS：

  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
Run Code Online (Sandbox Code Playgroud)

translateX 中的百分比指的是正在翻译的元素。所以 101% 比元素本身的宽度多 1%。

因此，元素的宽度会影响平移速度。较宽的元素运行速度较快，以便在 10 秒内执行动画，而较短的元素运行速度较慢。

这是一个工作示例，它满足我的工作场景的一些布局需求：

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}
Run Code Online (Sandbox Code Playgroud) 
  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
Run Code Online (Sandbox Code Playgroud)

我想为动画持续时间提供一个与元素宽度相关的值，这样我就可以使所有滚动条以相同的速度移动，而不管宽度如何。

我想也许我可以用calc()10 乘以或除以元素宽度的值。不幸的是，这里元素的宽度是动态的，因为它是由元素内的字符串定义的，并且该字符串在页面加载之前是未知的。

谢谢

html css css-animations

Jau*_*Mal
2019 05-16
9
推荐指数
1
解决办法
1817
查看次数

如何获得工作关键帧动画？

我正在尝试将动画制作为涟漪效果。它似乎在 chrome 浏览器上运行良好，但在 safari 上不起作用，我在同一页面中还有其他动画，它们在 chrome 和 safari 上都运行良好，但不是这个。我想知道我做错了什么。

我尝试调试它，我可以看到 Safari 图形选项卡中有一条消息说

“这个动画没有关键帧”

我的CSS代码：

.ripple-animation {
    &::after {
        @include rings(2s, 40s);
    }
    &::before {
        @include rings(2s, 40s);
    }
}

@mixin rings($duration, $delay) {
    opacity: 0.5;
    // display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -8px;
    left: -10px;
    right: 0;
    bottom: 0;
    content: '';
    height: 120%;
    width: 110%;
    border: 4px solid rgba(0, 0, 0, 0.4);
    border-radius: 100%;

    -webkit-animation-name: ripple;
    -webkit-animation-duration: $duration;
    -webkit-animation-delay: $delay;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.65, 0, …
Run Code Online (Sandbox Code Playgroud)

html css safari keyframe css-animations

Sal*_*han
2020 06-01
9
推荐指数
1
解决办法
651
查看次数

反应测试库和 onAnimationEnd

给定一个具有一些 CSS 动画（例如滑入/滑出）的组件：

function MyComponent(props) {
  return (
    <div
      className="with-animations"
      onAnimationEnd={() => {
        // set internal state
        // logic which needs coverage
      }}
    >
      {props.children}
    </div>
  );
}
Run Code Online (Sandbox Code Playgroud)

如何验证onAnimationEnd事件处理程序中的代码是否已被调用？

有没有办法模拟这个？

css-animations reactjs react-testing-library

Jon*_*ink
lucky-day
9
推荐指数
1
解决办法
5554
查看次数

标签 统计

css-animations ×10

css ×7

html ×6

css3 ×3

javascript ×2

safari ×2

angular ×1

angular-animations ×1

css-transforms ×1

google-chrome ×1

google-chrome-devtools ×1

jquery ×1

keyframe ×1

react-testing-library ×1

reactjs ×1