自从我添加了一个css过渡(第一个是悬停,第二个是动画)它似乎搞砸了我的字体,它们看起来"不同".
这是完全奇怪的,我已经找了好几个小时,找不到任何东西,我也无法弄清楚它为什么会发生.
在firefox中似乎没问题,但是safari和chrome有问题.
左下方齿轮动画下方的所有内容看起来都像一个较轻的字体重量,导航菜单看起来看起来一样.
我完全迷失在这一个.
这是动画的CSS.
.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
-webkit-animation-name: backrotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: backrotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to { …我想使用这样的关键帧动画分别为两个(或更多)css变换属性设置动画:
@keyframes translatex {
100% {
transform: translateX(100px);
}
}
@keyframes rotatez {
100% {
transform: rotateZ(80deg);
}
}
HTML:
<div class="rect"></div>
translatex动画应以0秒延迟开始,持续5秒.rotatez动画应以1秒延迟开始并持续3秒.因此,正确的元素开始移动,然后在1秒钟后开始旋转,然后在3秒后它停止旋转,再经过1秒后,它就完成了它的运动.
应用动画:
.rect {
animation-name: translatex, rotatez;
animation-duration: 5s, 3s;
animation-timing-function: ease, ease-in-out;
animation-delay: 0s, 1s;
animation-direction: forward, forward;
}
这里的问题是只应用了rotatez动画.我的问题是:有没有办法用css(关键帧动画,过渡)实现这样的动画,或者我需要JS和requestAnimationFrame？
编辑:: 我的FIDDLE
我试图将2个CSS动画链接在一起,请参阅笔:http://codepen.io/jdesilvio/pen/pjwvyO
我已经按照其他类似问题的答案中提供的语法,但它们似乎无法正常工作:
animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;
它正在播放第二个动画,然后是第一个动画,最后是第二个动画.我怎么能让它发挥第一,然后第二？
这是完整的代码:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes falling {
0% {
transform: translate3d(0, -400px, 0);
}
100% {
transform:
translate3d(0, 40%, 0)
rotateX(30deg)
rotateY(0deg)
rotateZ(60deg);
}
}
@keyframes laydown {
0% {
transform:
translate3d(0, 40%, 0)
rotateX(30deg)
rotateY(0deg)
rotateZ(60deg);
}
100% {
transform:
translate3d(0, 40%, 0) …我在一个按钮上创建了一个CSS3动画.目前,除了IE之外,它在任何地方都能完美运行.我知道它在旧的IE版本中不会运行良好,但我至少期待它在IE11中运行.
我创造了一个小提琴来演示小提琴
我打电话给动画:before,:after就像这样
animation: 1000ms ease 0s normal none infinite running pulse-long;
如果您在Firefox或Chrome中打开小提琴,您应该会看到按钮上的动画正常工作.如果你在IE11中打开它,它只是一个静态点.我已经上网并尝试了一些方法,例如将动画帧移动到CSS文件的顶部,但它仍然无效.
有没有办法让这个动画在IE11中运行？
当我点击一个按钮时,会出现一个滑块.(这里是它的样子的一个例子,不要注意这段代码)
滑块通过动画显示.动画结束后,我应该包含一个我从服务器加载的HTML页面.我需要在动画之后在滑块中应用HTML,否则动画停止(重新计算DOM).
等待数据准备就绪并完成转换
为什么？如果我在动画期间应用HTML,它会在将新HTML添加到DOM时停止动画.所以我等到第4步之前结束.
这是缩短的代码:
// Start loading data & animate transition
var count = 0;
var data = null;
++count;
$.get(url, function (res) {
data = res;
cbSlider();
});
// Animation starts here
++count;
$(document).on('transitionend', '#' + sliderId, function () {
$(document).off('transitionend', '#' + sliderId);
cbSlider()
});
function cbSlider() {
--count;
// This condition is only correct when both GET request and animation are finished
if …我正在尝试使用CSS和/或JavaScript模仿下面显示的动画.我已经创建了开始步骤但无法弄清楚如何为缩放设置动画部分.
body {
background-color: #222;
}
.container {
background-image: url(test.jpg);
height: 96vh;
width: 100%;
}
.box {
background-color: #fff;
height: 98vh;
width: 100%;
}
.big {
font-size: 17vw;
background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg) 33px 659px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding-top: 24vh;
margin-top: 0;
text-align: center;
animation: opac 2s infinite;
}
@keyframes opac {
0%, 100% {
/*rest the move*/
}
50% {
/*move some distance in y position*/
}
}<div class="container">
<div class="box">
<h1 class="big">TRY THIS</h1>
</div>
<!--end of box-->
</div>
<!--end …在我的下一个游戏中,我计划将DOM背景图层与其上方的画布混合在一起.我想将非交互式背景动画移动到该DOM图层,并使用关键帧动画进行变换和不透明度变化,例如移动云,飞机等.
至于我,有2个专业人士:
简单的关键帧动画更容易创建.恕我直言
在最有趣的一点-它应该提高性能:
transform和opacity动画可以是GPU加速和在单独的线程执行.还是我错了？也许浏览器需要更多的时间来制作这些图层的组合,还是有其他一些注意事项？
这种技术的最大相反之处在于,我们可以将它主要用于装饰动画,而不是用于我们的游戏,因为控制这些动画是一项艰巨的任务.
有没有人有这种分层的经验？
先感谢您.
看这个动画：
@keyframes roll-o-1animates --o）。@keyframes roll-o-2animates left）。为什么金色 div 动画不流畅？
是否有任何解决方法也使用变量？
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
@keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 0; …我正在尝试使用 css 属性旋转 Material-ui 图标animation，但没有得到所需的结果。有人可以帮我确定这里出了什么问题吗？
https://codesandbox.io/s/nifty-nightingale-v8sqh?file=/App.tsx
我的期望是一个连续旋转的图标。
我这里有一个jsfiddle - http://jsfiddle.net/w23v50h5/1/
div {
position: absolute;
left: 315px;
top: 143px;
width: 50px;
height: 50px;
background: red;
-webkit-animation: myOrbit 6s linear infinite;
-moz-animation: myOrbit 6s linear infinite;
-o-animation: myOrbit 6s linear infinite;
animation: myOrbit 6s linear infinite;
}
@-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);}
to { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); }
}
@-moz-keyframes myOrbit {
from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@-o-keyframes myOrbit {
from { …css-animations ×10
css ×8
css3 ×5
animation ×3
html ×3
javascript ×3
canvas ×1
css-shapes ×1
html5 ×1
material-ui ×1
react-hooks ×1
reactjs ×1
transform ×1
typescript ×1