Не работает анимация

@AraAraAra · Регистрация: 14.04.2017

Студворк — интернет-сервис помощи студентам

Добрый день. работаю в редакторе Sublime Text 3. Создаю простейшую анимацию вращения квадрата.
Создал 3 документа, прописал код, создался квадрат, но анимация в браузере Chrome не работает. Всю голову уже сломал, помогите найти причину.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Figures</title>
</head>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="script2.js"></script>
<body>
<div id = "animatejs"></div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
#animatejs{
 
    position:absolute;
    left: 700px;
    top:600px;
    width: 100px;
    height: 100px;
    background-color:#99FA38;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var element=document.getElementById('animatejs');
 
var keyframes=
[
{transform:'rotate(0)'},
{transform:'rotate(360deg)'}
]
var timings=
{
    duration: 1000,
    easing: 'linear',
    iterations: Infinity
}
element.animate(keyframes,timings)

@Mr_Sergo · 09.03.2019, 22:42

Сообщение от AraAraAra

в браузере Chrome не работает

Да нее... вроде все работает -> https://codepen.io/Mr_Sergo/pen/EMXLXM
Попробуйте так
index.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
 
<div id = "animatejs"></div>
 
</body>
</html>

script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.addEventListener('load',()=> {
 
    var element=document.getElementById('animatejs');
     
    var keyframes=
    [
    {transform:'rotate(0)'},
    {transform:'rotate(360deg)'}
    ]
    var timings=
    {
        duration: 1000,
        easing: 'linear',
        iterations: Infinity
    }
    element.animate(keyframes,timings)
 
});

styles.css

CSS
1
2
3
4
5
6
7
8
#animatejs{
    position:absolute;
    left: 30px;
    top: 30px;
    width: 100px;
    height: 100px;
    background-color:#99FA38;
}

Добавлено через 1 минуту
Пути до файла css и js в html-е свои укажите

@AraAraAra · 09.03.2019, 23:31 **[ТС]**

Добавлено через 2 минуты

Сообщение от Mr_Sergo

Пути до файла css и js в html-е свои укажите

Скажите, а какую то библиотеку нужно дополнительно подключать?

Добавлено через 4 минуты

Сообщение от Mr_Sergo

Пути до файла css и js в html-е свои укажите

Заработало! спасибо, а обьясните строчку верхнюю пожалуйста!

@Mr_Sergo · 10.03.2019, 00:25

JavaScript
1
window.addEventListener('load',()=> {

Если вы про эту строчку то устанавливаем событие полной загрузки окна и выполняем "внутрилежащий" код

Добавлено через 34 секунды
После полной загрузки html, css, всех картинок, выполнится код внутри.

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

Не работает анимация

Решение