英文:
How can I set a CSS keyframes in Javascript?
问题
以下是翻译好的部分：
<!-- 开始代码段：不隐藏 js 输出控制台：是 使用 Babel：否 -->
<!-- 语言：CSS -->
.cylon-eye {
background-color: yellow;
background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
<!-- 结束代码段 -->
我尝试将其转换如下，我应该调用的返回值是 `var cylon-eye = document.getElementById("cylon-eye");` 吗？
```javascript
var cylon-eye = document.getElementById("cylon-eye");
请注意，你的 JavaScript 代码中的变量名不能包含连字符 -，所以 var cylon-eye 应该改为 var cylonEye 或类似的变量名。
英文:
I have a CSS keyframes shown as below, my problem is I would like to set it as JavaScript (to put inside my div which already have some functions) so that I can return the "element" value to my function
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.cylon-eye {
background-color: yellow;
background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
<!-- end snippet -->
I've tried to convert as below after suggestion, is that the return value i should call is var cylon-eye = document.getElementById("cylon-eye");?
<script type="text/javascript">
function appendStyle(styles) {
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));
document.getElementsByTagName("head")[0].appendChild(css);
}
var styles = '#cylon-eye { background-color: yellow; background-image: linear-gradient(to right,rgba(255,255,255, 0.9) 25%,rgba(255,255,255, 0.1) 50%,rgba(255,255,255, 0.9) 75%); color: none; height: 100%; width: 20%;animation: 4s linear 0s infinite alternate move-eye; z-index: 10;}';
var keyFrames = '\
@keyframes move-eye {\
from {\
margin-left: -20%;\
}\
to {\
margin-left: 100%;\
}\
}';
window.onload = function() { appendStyle(styles) };
</script>
答案1
得分: 8
2022解决方案
现在可以像这个示例一样使用方法.animate()：
document.getElementById("tunnel").animate([
// 关键帧
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
], {
// 同步选项
duration: 1000,
iterations: Infinity
});
文档链接：
- https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
- https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats（闪烁效果示例）
英文:
2022 SOLUTION
Now it's possible to use the method .animate() as in this example
document.getElementById("tunnel").animate([
// key frames
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
], {
// sync options
duration: 1000,
iterations: Infinity
});
Docs:
答案2
得分: 7
以下是您要翻译的内容：
让我与您分享两个片段，一个是使用CSS + JavaScript，另一个仅使用JavaScript，您可以使用您喜欢的任何方式。希望对您有所帮助。
> 使用JavaScript
```js
let dynamicStyles = null;
function addAnimation(body) {
if (!dynamicStyles) {
dynamicStyles = document.createElement('style');
dynamicStyles.type = 'text/css';
document.head.appendChild(dynamicStyles);
}
dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}
addAnimation(`
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
`);
var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
element.style.backgroundImage = "linear-gradient(to right,rgba(255, 0, 0, 0.1) 25%,rgba(255, 0, 0) 50%,rgba(255, 0, 0, 0.1) 75%)";
element.style.animation = "4s linear 0s infinite alternate move-eye";
document.body.appendChild(element);
使用CSS + JavaScript
var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
document.body.appendChild(element);
.cylon-eye {
background-color: yellow;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0.9) 25%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
<details>
<summary>英文:</summary>
let me share with you two snippets, one is using **CSS + javascript** and another is only using **javascript**, you can use whatever preferred to you. Hope its helpful to you.
> WITH JAVASCRIPT
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let dynamicStyles = null;
function addAnimation(body) {
if (!dynamicStyles) {
dynamicStyles = document.createElement('style');
dynamicStyles.type = 'text/css';
document.head.appendChild(dynamicStyles);
}
dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}
addAnimation(`
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
`);
var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
element.style.backgroundImage = "linear-gradient(to right,rgba(255, 0, 0, 0.1) 25%,rgba(255, 0, 0) 50%,rgba(255, 0, 0, 0.1) 75%)";
element.style.animation = "4s linear 0s infinite alternate move-eye";
document.body.appendChild(element);
<!-- end snippet -->
> WITH CSS + JAVASCRIPT
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
document.body.appendChild(element);
<!-- language: lang-css -->
.cylon-eye {
background-color: yellow;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0.9) 25%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
<!-- end snippet -->
</details>
# 答案3
**得分**: 3
这对我来说很好，希望这能帮助您 :)
```javascript
var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@keyframes slidein {\
from {\
margin-left: 100%;\
width: 300%; \
}\
\
to {\
margin-left: 0%;\
width: 100%;\
}\
}';
\
document.getElementsById('slideDiv')[0].appendChild(style);
英文:
this works fine for me, Hope this will help 
var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@keyframes slidein {\
from {\
margin-left: 100%;\
width: 300%; \
}\
to {\
margin-left: 0%;\
width: 100%;\
}\
}';
document.getElementsById('slideDiv')[0].appendChild(style);
答案4
得分: 3
使用本机API功能来更改CSSStyleSheets将是明智的选择。您可以使用以下方法访问现有的样式表：
document.styleSheets[0].cssRules
这将返回所有已应用的规则，您将能够编辑与您的selector匹配的规则。
英文:
It would be wise to use Native API functionality to alter CSSStyleSheets. You can access existing stylesheets using the following method
document.styleSheets[0].cssRules
This will return all applied rules and you will be able to edit the rule where the selectorText matches your selector
答案5
得分: 3
你尝试过使用<style></style>标签吗？
例如：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const loading = document.querySelector('.loading');
const keyFrames = document.createElement("style");
keyFrames.innerHTML = `
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading {
animation: loading 1s ease infinite;
}
`;
loading.appendChild(keyFrames);
<!-- language: lang-css -->
.loading {
width: 100px;
height: 100px;
background-size: cover;
background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.24ways.org%2F2009%2F15%2Fassets%2Fimg%2Fspinner.png&f=1&nofb=1');
background-repeat: no-repeat;
}
<!-- language: lang-html -->
<!doctype html>
<html>
<head>
<title>Keyframes in js</title>
</head>
<body>
<div class="loading"></div>
</body>
</html>
<!-- end snippet -->
英文:
have you tried using a <style></style> tag?
For example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const loading = document.querySelector('.loading');
const keyFrames = document.createElement("style");
keyFrames.innerHTML = `
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading {
animation: loading 1s ease infinite;
}
`;
loading.appendChild(keyFrames);
<!-- language: lang-css -->
.loading {
width: 100px;
height: 100px;
background-size: cover;
background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.24ways.org%2F2009%2F15%2Fassets%2Fimg%2Fspinner.png&f=1&nofb=1');
background-repeat: no-repeat;
}
<!-- language: lang-html -->
<!doctype html>
<html>
<head>
<title>Keyframes in js</title>
</head>
<body>
<div class="loading"></div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论