继续旋转CSS动画级别

时间:2017-01-02 23:22:01

标签: html css

我有这个:

div {
	position: relative;
	width: 20px;
	height: 100px;
	border-radius: 10px;
	background: green;
	margin: 0 auto;
	transform-origin: 10px 10px;
	animation: rotate 1s ease-in-out infinite alternate;
}

@keyframes rotate {
	from {transform: rotate(-30deg);}
	to {transform: rotate(30deg);}
}

hr {
	position: relative;
	top: -10px;
}
<div></div>
<hr>

但我想要这样的事情:

div {
	position: relative;
	width: 20px;
	height: 100px;
	border-radius: 10px;
	background: green;
	margin: 0 auto;
	transform-origin: 10px 10px;
	animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate;
}

@keyframes rotate {
	from {transform: rotate(-30deg);}
	to {transform: rotate(30deg);}
}

@keyframes translate {
	from {top: 10px;}
	to {top: 0px;}
}

hr {
	position: relative;
	top: -10px;
}
<div></div>
<hr>

编辑:我可能没解释得这么好。我的意思是,是否有一种方法可以让div的底部触及线条,使用任何类型的动画来上下移动它?我希望它是动态的,所以如果我改变旋转的值,我就不必计算和改变翻译的值。

EDIT2:简单地说:我只想让div做第二个例子正在做的事情而不需要垂直移动的特定值。

2 个答案:

答案 0 :(得分:1)

你应该玩价值观以使其完美,但这就是这个想法:

div {
	position: relative;
	width: 20px;
	height: 100px;
	border-radius: 10px;
	background: green;
	margin: 0 auto;
	transform-origin: 10px 10px;
	animation: rotate 1s ease-in-out infinite alternate;
}

@keyframes rotate {
	0% {transform: rotate(-30deg); top: 10px;}
	50% {top: 0px;}
	100% {transform: rotate(30deg); top: 10px;}
}

hr {
	position: relative;
	top: -10px;
}
<div></div>
<hr>

答案 1 :(得分:0)

我不确定这是你所期望的,但我会试一试。

uint8_t value;
  for (uint16_t a = 0; a < 32768; a++) {
    value = fram.read8(a);
    if ((a % 32) == 0) {
      Serial.print("\n 0x"); Serial.print(a, HEX); Serial.print(": ");
    }
    Serial.print("0x"); 
    if (value < 0x1) 
      Serial.print('0');
    Serial.print(value, HEX); Serial.print(" ");
  }
* {
  margin: 0;
  padding: 0;
}

div {
  width: 20px;
  height: 100px;
  border-radius: 10px;
  background: green;
  margin: 0 auto;
  transform-origin: 10px 10px;
  animation: rotate 1s ease-in-out infinite alternate, stretch 1s ease-in-out infinite;
}

hr {
  position: absolute;
  top: 99px;
  width: 99%;
}

@keyframes rotate {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

@keyframes stretch {
  0% {
    height: 112px;
  }
  50% {
    height: 100px;
  }
  100% {
    height: 112px;
  }
}