Question

我想在开头和结尾倾斜图像。图像关键帧，变换和变换原点似乎不起作用。

HTML：

 <div class="h_imag col-md-9">
          <img class="h_ig"src="top_right_image.gif" alt="">
        </div>

的CSS：

.h_imag{
  min-height: 6px;
  float: right;
  animation: t_bike 10s infinite;
}

@-moz-keyframes t_bike {
0%    {top: 0px; left: 0px; -moz-transform: rotate(0 deg); -moz-transform-origin: -9px 15px;}
5%    {top: 0px; left: 1%; -moz-transform: rotate(-10 deg); -moz-transform-origin: 20px 0px;}
10%   {top: 0px; left: 4.6%; -moz-transform: rotate(-20 deg); -moz-transform-origin: 29px 0px;}
20%   {top: 0px; left: 9.2%; -moz-transform: rotate(-25 deg); -moz-transform-origin: 31px 0px;}
25%   {top: 0px; left: 13.8%; -moz-transform: rotate(-25 deg); -moz-transform-origin: 31px 0px;}
30%   {top: 0px; left: 18.4%; -moz-transform: rotate(-30 deg); -moz-transform-origin: 31px 0px;}
35%   {top: 0px; left: 23%; -moz-transform: rotate(-30 deg); -moz-transform-origin: 31px 0px;}
40%   {top: 0px; left: 27.6%; -moz-transform: rotate(-30 deg); -moz-transform-origin: 31px 0px;}
45%   {top: 0px; left: 32.2%; -moz-transform: rotate(-25 deg); -moz-transform-origin: 31px 0px;}
50%   {top: 0px; left: 36.8%; -moz-transform: rotate(-20 deg); -moz-transform-origin: 31px 0px;}
55%   {top: 0px; left: 41.4%; -moz-transform: rotate(0 deg); -moz-transform-origin: 31px 0px;}
60%   {top: 0px; left: 46%; -moz-transform: rotate(0 deg); -moz-transform-origin: 31px 0px;}
65%   {top: 0px; left: 50.6%; -moz-transform: rotate(0 deg); -moz-transform-origin: 31px 0px;}
70%   {top: 0px; left: 55.2%; -moz-transform: rotate(20 deg); -moz-transform-origin: 70px 0px;}
75%   {top: 0px; left: 59.8%; -moz-transform: rotate(25 deg); -moz-transform-origin: 70px 0px;}
80%   {top: 0px; left: 64.4%; -moz-transform: rotate(30 deg); -moz-transform-origin: 65px 0px;}
85%   {top: 0px; left: 69%; -moz-transform: rotate(30 deg); -moz-transform-origin: 65px 0px;}
90%   {top: 0px; left: 73.6%; -moz-transform: rotate(30 deg); -moz-transform-origin: 65px 0px;}
95%   {top: 0px; left: 78.2%; -moz-transform: rotate(10 deg); -moz-transform-origin: 75px 0px;}
100%   {top: 0px; left: 88%; -moz-transform: rotate(0 deg); -moz-transform-origin: -9px 15px;}
}

Answer 1

主要问题是0 deg中的空格，不应该是数字和deg字符之间的空格。

如果您计划在所有现代浏览器上运行此功能，则还需要无前缀版本。

此外，由于顶部值未更改，因此我将其移至h_imag规则并添加position: relative;以使left生效。

＆＃13;

.h_imag{
  position: relative;
  top: 0;
  min-height: 6px;
  float: right;
  animation: t_bike 10s infinite;
}

@keyframes t_bike {
0%    { left: 0px; transform: rotate(0deg); transform-origin: -9px 15px; }
5%    { left: 1%; transform: rotate(-10deg); transform-origin: 20px 0px; }
10%   { left: 4.6%; transform: rotate(-20deg); transform-origin: 29px 0px; }
20%   { left: 9.2%; transform: rotate(-25deg); transform-origin: 31px 0px; }
25%   { left: 13.8%; transform: rotate(-25deg); transform-origin: 31px 0px; }
30%   { left: 18.4%; transform: rotate(-30deg); transform-origin: 31px 0px; }
35%   { left: 23%; transform: rotate(-30deg); transform-origin: 31px 0px; }
40%   { left: 27.6%; transform: rotate(-30deg); transform-origin: 31px 0px; }
45%   { left: 32.2%; transform: rotate(-25deg); transform-origin: 31px 0px; }
50%   { left: 36.8%; transform: rotate(-20deg); transform-origin: 31px 0px; }
55%   { left: 41.4%; transform: rotate(0deg); transform-origin: 31px 0px; }
60%   { left: 46%; transform: rotate(0deg); transform-origin: 31px 0px; } 
65%   { left: 50.6%; transform: rotate(0deg); transform-origin: 31px 0px; }
70%   { left: 55.2%; transform: rotate(20deg); transform-origin: 70px 0px; }
75%   { left: 59.8%; transform: rotate(25deg); transform-origin: 70px 0px; }
80%   { left: 64.4%; transform: rotate(30deg); transform-origin: 65px 0px; }
85%   { left: 69%; transform: rotate(30deg); transform-origin: 65px 0px; }
90%   { left: 73.6%; transform: rotate(30deg); transform-origin: 65px 0px; }
95%   { left: 78.2%; transform: rotate(10deg); transform-origin: 75px 0px; }
100%  { left: 88%; transform: rotate(0deg); transform-origin: -9px 15px; }
}

＆＃13;

<div class="h_imag col-md-9">
  <img class="h_ig" src="http://placehold.it/150" alt="">
</div>

＆＃13;

Answer 2

如果其他所有内容都无效，那么这意味着它根本就没有运行。

它认为问题出在h_imag的正常css上。

改变这个：

animation: t_bike 10s infinite;

对此：

-moz-animation: t_bike 10s infinite;

Answer 3

旋转编号和旋转单位示例90 deg之间有空格。删除这些spcaes。还要为转换属性添加前缀，并为跨浏览器compat添加关键帧。

.h_imag{
  min-height: 6px;
  float: right;
  animation: t_bike 10s infinite;
}

@-moz-keyframes t_bike {
0%    {top: 0px; left: 0px; -moz-transform: rotate(0deg); -moz-transform-origin: -9px 15px;}
5%    {top: 0px; left: 1%; -moz-transform: rotate(-10deg); -moz-transform-origin: 20px 0px;}
10%   {top: 0px; left: 4.6%; -moz-transform: rotate(-20deg); -moz-transform-origin: 29px 0px;}
20%   {top: 0px; left: 9.2%; -moz-transform: rotate(-25deg); -moz-transform-origin: 31px 0px;}
25%   {top: 0px; left: 13.8%; -moz-transform: rotate(-25deg); -moz-transform-origin: 31px 0px;}
30%   {top: 0px; left: 18.4%; -moz-transform: rotate(-30deg); -moz-transform-origin: 31px 0px;}
35%   {top: 0px; left: 23%; -moz-transform: rotate(-30deg); -moz-transform-origin: 31px 0px;}
40%   {top: 0px; left: 27.6%; -moz-transform: rotate(-30deg); -moz-transform-origin: 31px 0px;}
45%   {top: 0px; left: 32.2%; -moz-transform: rotate(-25deg); -moz-transform-origin: 31px 0px;}
50%   {top: 0px; left: 36.8%; -moz-transform: rotate(-20deg); -moz-transform-origin: 31px 0px;}
55%   {top: 0px; left: 41.4%; -moz-transform: rotate(0deg); -moz-transform-origin: 31px 0px;}
60%   {top: 0px; left: 46%; -moz-transform: rotate(0deg); -moz-transform-origin: 31px 0px;}
65%   {top: 0px; left: 50.6%; -moz-transform: rotate(0deg); -moz-transform-origin: 31px 0px;}
70%   {top: 0px; left: 55.2%; -moz-transform: rotate(20 deg); -moz-transform-origin: 70px 0px;}
75%   {top: 0px; left: 59.8%; -moz-transform: rotate(25deg); -moz-transform-origin: 70px 0px;}
80%   {top: 0px; left: 64.4%; -moz-transform: rotate(30deg); -moz-transform-origin: 65px 0px;}
85%   {top: 0px; left: 69%; -moz-transform: rotate(30deg); -moz-transform-origin: 65px 0px;}
90%   {top: 0px; left: 73.6%; -moz-transform: rotate(30deg); -moz-transform-origin: 65px 0px;}
95%   {top: 0px; left: 78.2%; -moz-transform: rotate(10deg); -moz-transform-origin: 75px 0px;}
100%   {top: 0px; left: 88%; -moz-transform: rotate(0deg); -moz-transform-origin: -9px 15px;}
}

 <div class="h_imag col-md-9">
          <img class="h_ig"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjKEpedzfPj_kXxRz3OIoNsVzWrLJWsr6xzN-gjYYUxfvbCsOXBg" alt="">
        </div>

变换，变换起源不在@keyframes内工作

3 个答案: