Transition attribute not working in CSS

HTML & CSS
,
1

I am following http://www.w3schools.com/howto/howto_css_loader.asp

I have simply pasted the codes (HTML and CSS) as they are given in my HTML file. In CSS file, we have different attributes like height, width etc and then there are their values.

The attributes are in bold letters while their values are in regular style (non-bold style). When I write the attribute “transition”, it appears as a regular text (a probable indication that it is not being recognized as an attribute). No awards for guessing that the code didn’t work.

Why is it not being recognized as an attribute?

Also, there is note just below the codes “Note: You should also include -webkit- and -ms- prefixes for
browsers that do not support animation and transform properties.”

What is its possible interpretation?

To make things more clear I am also uploading my source file.loader.html (489 Bytes)

2

Check your spelling:-

0% { trasnform: rotate(0deg); }


Also validate your html.
The `title` and `style` tags should be within the `head` element.
1 Like
3

still it’s not working… transition is not appearing as an attribute

4

Other issues: No Doctype, no body elelement, missing closing bracket after the .loader class selector.
This should work and validate:-

<!DOCTYPE html>
<html>
<head>
<title>Upendra Pratap Singh</title>
<style>
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h1>This is my first loader</h1>
<div class="loader"></div>
</body>
</html>

Bookmark this page, and use it.

2 Likes
5

Best to avoid w3schools - a lot of the information there is way out of date and unless you already know what it is trying to teach you can’t tell what is current from what was obsolete 15 years ago.

1 Like
6

any references to make use of as an alternative to w3schools. Does SitePoint publish its ebooks etc online?

7
8

You can join SitePoint Premium.

Other useful resources are http://tympanus.net/codrops/css_reference/ and https://css-tricks.com/almanac/

9

Yes, Ebooks, books, courses, screencasts, etc. Take a look at SP Premium.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.