CSS动画重置转换

时间：2017-11-12 09:30:52

标签： javascript jquery css

我有一个CSS时钟，分针有以下动画样式：

animation: a36016 3600s normal infinite steps(3600,end);

这允许它随着分钟的流逝而移动。

当我加载页面时，分针的旋转设置如下：

transform:rotate(180deg);

使用setInterval我正在尝试重新同步它。所以例如在10分钟之后如果我得到旋转例如210deg，然后我改变它如下：

$('#clock .mm').css( {'transform': 'rotate(210deg)'});

问题在于它实际上并没有将度数设置为210，由于某种原因它会增加动画已经移动的任何度数。所以它变成210deg加上已经移动的任何数量。

有人可以告诉我如何调整动画样式，这样就不会发生这种情况，如果将旋转usig javascript更改为它是什么，它应该将其设置为无论已经移动了多少度。

由于

*以下是完整的代码*

PHP 

<?php

date_default_timezone_set("Europe/London");

$hour = date("g");
$minutes = date("i");
$seconds = date("s");

   if ($hour>=12){
    $hour=0;
}

$hourinseconds = ($hour*3600)+($minutes*60)+$seconds;
$minutesinseconds = ($minutes*60)+$seconds;

$hour_degree = ($hourinseconds/43200)*360;
$minutes_hand = ($minutesinseconds/3600)*360;
$seconds_hand = ($seconds/60)*360;    

?>

HTML，CSS和jQuery 

$(document).ready(function(){

    function SyncTime(){
        $.getJSON('ajax.php', function(data) {
            $('#clock .hh').css( {'transform': 'rotate('+data.hour+'deg)'});
            $('#clock .mm').css( {'transform': 'rotate('+data.min+'deg)'});
        });
    }

    setInterval(SyncTime,5000);

});
body {
	overflow: hidden;
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

h1,
h6 {
	font-family: 'Open Sans';
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}


/*** Font for numbers ***/

@font-face {
	font-family: 'WallClock';
	src: url('fonts/wallclock.eot');
}

@font-face {
	font-family: 'WallClock';
	src: url('fonts/wallclock.woff') format('woff'), url('fonts/wallclock.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'WallClockPS';
	src: url('fonts/wallclock.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}


/*** Clock rules. Pure CSS ***/

#clock {
	transition: all 0.5s ease;
}

#a {
	width: 100em;
	height: 100em;
	position: relative;
	border-radius: 50em;
	background: #eee;
	box-shadow: inset 0.5em -0.5em 0 #ccc, inset 1.7em -1.7em 0 #555, inset -0.3em -0.4em 0 #999, inset -0.3em 0.2em 0 #ccc, inset -1em -1em 0 #555, 1em 3em 2em rgba(0, 0, 0, 0.3);
}

#b {
	width: 94em;
	height: 94em;
	top: 3em;
	left: 3em;
	position: relative;
	border-radius: 47em;
	background: #fff;
	box-shadow: inset 0.4em 0 0 #fff, inset 0 -0.6em 0 #ddd, inset 1.6em -0.8em 0 #222, inset -1.6em 0.8em 0 #222, inset 2em 2em 0 #222, 0.6em -0.3em 0 #999, -1em 1em 0 #777, -1.3em -2em 0 #fff, 1.3em 2em 0 #222, 1.3em 3em 0 #999;
}

#c {
	width: 89em;
	height: 89em;
	top: 2.5em;
	left: 2.5em;
	position: relative;
	border-radius: 44.5em;
	background: #f4f5f6;
	box-shadow: inset 0.5em 1em 0.5em rgba(0, 0, 0, 0.4), inset 1em 2em 2em rgba(0, 0, 0, 0.3), inset 0 0.5em 3em rgba(0, 0, 0, 0.1), -1.6em 0.8em 0 #444, 1.6em -0.8em 0 #444;
}

#d {
	width: 88em;
	height: 88em;
	top: 0.5em;
	left: 0.5em;
	position: relative;
	border-radius: 44em;
}

#e {
	width: 81.8em;
	height: 81.8em;
	padding-top: 40.9em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	left: 2.9em;
	top: 2.9em;
	position: absolute;
	border: solid 0.4em #777;
	border-radius: 40.9em;
}

#ii {
	padding-left: 43.4em;
	position: absolute;
}

b,
i {
	height: 82em;
	position: absolute;
	border: solid 0 #222;
	border-width: 3em 0;
	display: block;
}

b {
	width: 1.2em;
}

i {
	width: 0.2em;
}

b>i,
i>i {
	transform: rotate(6deg);
	margin-top: -3em;
}

b>b {
	transform: rotate(30deg);
	margin-top: -3em;
}

b>i {
	left: 0.3em;
}

#f,
#g {
	font: 12em/1.0em WallClock, sans-serif;
	text-align: center;
	width: 6.8em;
	color: #222;
}

#g>u>u {
	letter-spacing: 0.1em;
}

#g>u>u>u {
	letter-spacing: 0;
}

u {
	display: block;
	line-height: 1em;
	text-decoration: none;
}

u>u>u>u {
	margin: 0.5em -0.55em;
	padding: 0 0.05em;
}

u>u>u {
	margin: 0.0em -1.75em;
	padding: 0 0.7em;
}

u>u {
	margin: -0.55em 0;
	text-align: right;
	padding: 0 1.65em;
}

#f {
	margin-top: -3.37em;
}

#g {
	margin-top: -6em;
}

#g u>u {
	text-align: left;
}

#q {
	font: 2.2em/1em Segoe UI, Helvetica, sans-serif;
	text-align: center;
	margin-top: -11.5em;
	color: #555;
}

.ss,
.mm,
.hh {
	width: 80em;
	height: 80em;
	top: 4em;
	left: 4em;
	position: absolute;
}

.hh {
	transform: rotate(-55deg);
}

.mm {
	transform: rotate(60deg);
}

.ss {
	animation: tick 1s normal infinite steps(25, end);
}

@keyframes tick {
	0% {
		transform: rotate(0deg);
	}
	12% {
		transform: rotate(6deg);
	}
	100% {
		transform: rotate(6deg);
	}
}

.s {
	width: 1em;
	height: 48em;
	top: 6em;
	left: 39.5em;
	position: relative;
	background: #a00;
	outline: 1px solid transparent;
	animation: a360_10 60s normal infinite steps(60, end);
}

.sr {
	width: 3em;
	height: 3em;
	background: #a00;
	margin: -9.5em 0 0 38.4em;
	border-radius: 1.5em;
}

@keyframes a360_10 {
	0% {
		transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
	}
	100% {
		transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
	}
}

.m {
	height: 48em;
	left: 38.9em;
	width: 2.2em;
	position: relative;
	background: #222;
	border: 0 0 32em 0;
	animation: a36016 3600s normal infinite steps(3600, end);
	outline: 1px solid transparent;
}

@keyframes a36016 {
	0% {
		transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
	}
	100% {
		transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
	}
}

.mr {
	width: 5em;
	height: 5em;
	background: #222;
	margin: -10.5em 0 0 37.4em;
	border-radius: 2.5em;
}

.h {
	width: 3em;
	height: 34em;
	left: 38.5em;
	position: relative;
	background: #222;
	margin-top: 13em;
	outline: 1px solid transparent;
	animation: a36010 43200s normal infinite steps(43200, end);
}

#sh {
	width: 80em;
	height: 80em;
	top: 2em;
	left: 1em;
	position: absolute;
}

#sh .s,
#sh .m,
#sh .h,
#sh .mr {
	background: #ddd;
	xbox-shadow: 0 0 0.5em #ddd, 0 0 0.25em #ddd;
}

#k {
	width: 88em;
	height: 88em;
	position: absolute;
	border-radius: 44em;
	box-shadow: inset 4.5em 9em 0.5em rgba(250, 252, 253, 0.2);
}


/* Vendor CSS prefixes */

#css3prefixed:checked~#clock {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

#css3prefixed:checked~#clock b>i,
#css3prefixed:checked~#clock i>i,
#css3fixed:checked~#clock b>i,
#css3fixed:checked~#clock i>i {
	-webkit-transform: rotate(6deg);
}

#css3prefixed:checked~#clock b>b,
#css3fixed:checked~#clock b>b {
	-webkit-transform: rotate(30deg);
}

#css3prefixed:checked~#clock .hh,
#css3fixed:checked~#clock .hh {
	-webkit-transform: rotate(-55deg);
}

#css3prefixed:checked~#clock .mm,
#css3fixed:checked~#clock .mm {
	-webkit-transform: rotate(60deg);
}

#css3prefixed:checked~#clock .ss,
#css3fixed:checked~#clock .ss {
	-webkit-animation: tick 1s normal infinite steps(25, end);
}

@-webkit-keyframes tick {
	0% {
		-webkit-transform: rotate(0deg);
	}
	12% {
		-webkit-transform: rotate(6deg);
	}
	100% {
		-webkit-transform: rotate(6deg);
	}
}

#css3prefixed:checked~#clock .s,
#css3fixed:checked~#clock .s {
	-webkit-animation: a360_10 60s normal infinite steps(60, end);
}

@-webkit-keyframes a360_10 {
	0% {
		-webkit-transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
	}
	100% {
		-webkit-transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
	}
}

#css3prefixed:checked~#clock .m,
#css3fixed:checked~#clock .m {
	-webkit-animation: a36016 3600s normal infinite steps(3600, end);
}

@-webkit-keyframes a36016 {
	0% {
		-webkit-transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
	}
	50% {
		-webkit-transform: translate(0, 16em) rotate(180deg) translate(0, -16em);
	}
	100% {
		-webkit-transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
	}
}

#css3prefixed:checked~#clock .h,
#css3fixed:checked~#clock .hh {
	-webkit-animation: a36010 43200s normal infinite steps(43200, end);
}


/* Fixes */

#css3fixed:checked~#clock {
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}

.fixed {
	display: none;
}


/* Following will fix problems with cascaded transformations
    	are critical in Safari, Mobile Safari, Opera,
    	non-critical in Chrome and Firefox */

</style><!--[if !IE]>--><style>#css3fixed:checked~#clock .fixed {
	display: block;
}

#css3fixed:checked~#clock .pure {
	display: none;
}

</style><!-- <![endif]--><style>#css3fixed:checked~#clock b:nth-child(2) {
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
}

#css3fixed:checked~#clock b:nth-child(3) {
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
}

#css3fixed:checked~#clock b:nth-child(4) {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

#css3fixed:checked~#clock b:nth-child(5) {
	transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
}

#css3fixed:checked~#clock b:nth-child(6) {
	transform: rotate(150deg);
	-webkit-transform: rotate(150deg);
}

#css3fixed:checked~#clock i:nth-child(2) {
	transform: rotate(12deg);
	-webkit-transform: rotate(12deg);
}

#css3fixed:checked~#clock i:nth-child(3) {
	transform: rotate(18deg);
	-webkit-transform: rotate(18deg);
}

#css3fixed:checked~#clock i:nth-child(4) {
	transform: rotate(24deg);
	-webkit-transform: rotate(24deg);
}


/* IE10 fix */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
	#css3fixed:checked~#clock i,
	#css3fixed:checked~#clock b {
		border-left: solid 0px #fff;
		border-right: solid 0px #fff;
	}
}


/* Opera rotation fix */

#css3fixed:checked~#clock .s {
	animation: a360_10of 60s normal infinite steps(60, end);
}

@keyframes a360_10of {
	0% {
		transform: translate(0, 10em) rotate(0deg) translate(0, -10em);
		-o-transform: translate(0, 3.2em) rotate(0deg) translate(0, -3.2em)
	}
	100% {
		transform: translate(0, 10em) rotate(360deg) translate(0, -10em);
		-o-transform: translate(0, 3.2em) rotate(360deg) translate(0, -3.2em)
	}
}


/* Chrome/Windows antialiasing bug. */

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#css3fixed:checked~#clock #f,
	#css3fixed:checked~#clock #g {
		font: 12em/1em WallClockPS, sans-serif;
	}
	#css3fixed:checked~#clock #g {
		-webkit-transform: translate(0, -0.05em);
	}
}


/* Clock size selection */

#clock {
	font-size: 5px;
}

#size25percent:checked~#clock {
	font-size: 25%
}

#size250px:checked~#clock {
	font-size: 2.5px
}

#size500px:checked~#clock {
	font-size: 5px
}

#size10em:checked~#clock {
	font-size: 0.1em
}

#size25percent:checked~#clock {
	font-size: 25%
}


/* Controls */

input {
	width: 1em;
	position: relative;
	valign: top;
}

input[type=checkbox] {
	left: 0.2em;
}

input+label {
	padding: 0.2em 0.4em 0.3em 1.4em;
	margin-left: -1.4em;
	border-radius: 0.3em;
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
}

input:checked+label {
	background: #ABD8F2;
}

input,
label {
	line-height: 1.8em;
}

label {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#clock {
	position: absolute;
	right: 55%;
	top: 50px;
	display: block;
}

#clock {
	margin-top: 4em;
}

body #clock .hh {
	transform: rotate(<?php echo $hour_degree;
	?>deg);
}

#clock .mm {
	transform: rotate(<?php echo $minutes_hand;
	?>deg);
	-webkit-transform: rotate(<?php echo $minutes_hand;
	?>deg);
	-ms-transform: rotate(<?php echo $minutes_hand;
	?>deg);
}

#clock .ss {
	animation: tick 1s normal infinite steps(25, end);
	-webkit-animation: tick 1s normal infinite steps(25, end);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div style="width:700px;;position:absolute;left:748px;top:84px;">Content</div>
<div id="clock" style="margin-top:84px;">
<div id="a">
   <div id="b">
      <div id="c">
         <div id="d">
            <div id="sh">
               <div class="hh">
                  <div class="h"></div>
               </div>
               <div class="mm">
                  <div class="m"></div>
                  <div class="mr"></div>
               </div>
               <div class="ss">
                  <div class="s"></div>
               </div>
            </div>
            <div id="ii">
               <div class="pure">
                  <b><i><i><i><i></i></i></i></i>
                  <b><i><i><i><i></i></i></i></i>
                  <b><i><i><i><i></i></i></i></i>
                  <b><i><i><i><i></i></i></i></i>
                  <b><i><i><i><i></i></i></i></i>
                  <b><i><i><i><i></i></i></i></i></b>
                  </b>
                  </b>
                  </b>
                  </b>
                  </b>
               </div>
               <!-- this is need only to show 
                  bugs-free variant in many browsers -->
               <div class="fixed">
                  <b><i></i><i></i><i></i><i></i></b>
                  <b><i></i><i></i><i></i><i></i></b>
                  <b><i></i><i></i><i></i><i></i></b>
                  <b><i></i><i></i><i></i><i></i></b>
                  <b><i></i><i></i><i></i><i></i></b>
                  <b><i></i><i></i><i></i><i></i></b>
               </div>
               <!-- till here -->
            </div>
            <div id="e">
               <div id="f">
                  <u>12<u>1<u>2<u>3</u>4</u>5</u></u>
               </div>
               <div id="g">
                  <u><u>11<u>10<u>9</u>8</u>7</u>6</u>
               </div>
               <div id="q">&nbsp;&nbsp;quartz</div>
            </div>
            <div class="hh">
               <div class="h"></div>
            </div>
            <div class="mm">
               <div class="m"></div>
               <div class="mr"></div>
            </div>
            <div class="ss">
               <div class="s"></div>
               <div class="sr"></div>
            </div>
            <div id="k"></div>
         </div>
      </div>
   </div>
</div>
<div id="css3icon"/>

2 个答案:

答案 0 :(得分：0)

这将完全删除CSS属性的值，这会有帮助吗？

// Reset transform
$('#clock .mm').css({'transform': ''});

答案 1 :(得分：0)

此问题与通过jQuery更改转换或通过CSS转换初始值无关。

如果您有以下示例：

＆＃13;
＆＃13; 
<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        .a{width: 100px; height:100px; margin: 100px auto; background: #000}
        .b{height: 100px; width: 100px;transform:rotate(10deg); background: red;}
        
    </style>
  </head>
  <body>
      <div class="a">
          <div class="b">
              
          </div>
      </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
    <script language="javascript">
        $('.b').css( {'transform': 'rotate(20deg)'});
    </script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

你看到它只会改变10度甚至你改变$（＆＃39; .b＆＃39;）。css（{＆＃39; transform＆＃39;：＆＃39; rotate（10deg）＆＃ 39;}）;它不会改变。

问题与其他问题有关，甚至与逻辑错误有关。

根据您在将jQuery更改为此时发送的代码：

$(document).ready(function(){

function SyncTime(){
    $('#clock .hh').css( {'transform': 'rotate(50deg)'});
    $('#clock .mm').css( {'transform': 'rotate(50deg)'});
}

setInterval(SyncTime,5000);

});

5秒后，它将重定向到某个位置，永远不会改变它的位置。从ajax.php传递的计算时间有问题

相关问题
最新问题