首页 \ 问答 \ CSS旋转轮5秒后停止?(CSS spinning wheel stop after 5 seconds?)

CSS旋转轮5秒后停止?(CSS spinning wheel stop after 5 seconds?)

我正在使用我在小提琴上找到的这个CSS代码来旋转我的轮子:

http://jsfiddle.net/gaby/9Ryvs/7/

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

基本上我想在1800 Degress之后完全停止旋转,然后回到0,以便稍后再旋转它。

这可能吗?


I am using this CSS code I found on fiddle to spin my wheel:

http://jsfiddle.net/gaby/9Ryvs/7/

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Basically I want to stop the spinning exactly after it reaches 1800 Degress, and then go back to 0 so I can spin it again later.

Is that possible to do?


原文:https://stackoverflow.com/questions/17053544
更新时间:2023-07-23 18:07

最满意答案

通过调用selectMovie()函数替换.then(selectRandom)及其后的所有内容。


Replace .then(selectRandom) and everything after it by calling your selectMovie() function.

相关问答

更多
  • 您可以将条件then处理程序附加到条件本身中返回的promise,就像这样 readFile('example.json').then(function (file) { return Promise.each(EJSON.parse(file), function (entry) { return Entries.insertSync(entry); }); }).then(function () { if (process.env.NODE_ENV === 'de ...
  • 您可以在一行中执行此操作,如您的问题格式所暗示的那样: (userisBuyer ? Order.Create() : Order.Create.As.Buyer()).then(function() { //do same stuff for both }); 但你真的想要吗? var createMethod = userisBuyer ? Order.Create : Order.Create.As.Buyer; createMethod().then(function() { }); ...
  • 你必须在每个链式方法中检查状态(是否应该取消): var userRequestedCancel = false; this .getData() .then(function() { if(userRequestedCancel) { return Promise.reject('user cancelled'); } return getMoreData(); }) .then(function() { if(userReq ...
  • 您可以在else块中throw一个Error ,然后在promise链的末尾catch它: var p = new Promise((resolve, reject) => { setTimeout(function() { resolve(1) }, 0); }); p .then((res) => { if(false) { return res + 2 } else { // do something and break ...
  • 通过调用selectMovie()函数替换.then(selectRandom)及其后的所有内容。 Replace .then(selectRandom) and everything after it by calling your selectMovie() function.
  • 存在根本区别,因为在第二种情况下 ,您返回的最终承诺p2将始终只返回值2 ,而不会链接其代码的其余部分,这些代码也将运行但不会以任何方式影响返回的p2解析的值。 一个简单的例子是这样的: var p = new Promise(res => res(1)); p = p.then(() => new Promise(res => res(2))); p = p.then(() => new Promise(res => res(3))); p.then(v => console.log(v)); 与 v ...
  • 如果在最后.then()我会做这个window.setTimeout(1, download_resources); 这完全没有意义,原因有两个: 人为地拖延任何东西都没有意义。 您的承诺代码已经异步。 您将无法从您的承诺链返回download_resources的结果 What if in last .then() I will be do this window.setTimeout(1, download_resources); That makes absolutely no sense, for ...
  • 您的问题是您没有从showOff函数返回Promise。 其实你什么也没回来。 代码return Promise.resolve(message); 返回为setTimeout创建的匿名函数, 而不是 showOff 。 所以你必须返回这样的承诺: var showOff = function (phone) { var message = 'Need New Phone ' + phone.color + ' ' + phone.brand + ' phone'; ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)