CSS3 animations of a turntable

Question

I have the following code, which acts like a turntable and plays Sgt. Pepper when you load the page. This works only in Safari (I suppose I can delete the FF parts then), so I'm wondering how I can make the code better. The reason for there being a first, last, and main class on most div's is because records start out slower, then slow down once they're finished, and this was the only way I could accomplish it (that I knew).

HTML:

<div class="noise"></div>
<div class="container">
 <div class="cover"></div>
 <div class="content">
 <div class="switch">
 <div class="toggle"></div>
 </div>
 <div class="arm_container">
 <div class="pivot"></div>
 <div class="front_arm">
 <div class="tip"></div>
 <div class="thick"></div>
 </div>
 <div class="back_arm"></div>
 </div>
 <div class="rest"></div>
 <div class="center">
 <div class="small"></div>
 </div>
 <div class="first top_vinyl vinyl">
 <div class="last top_vinyl vinyl">
 <div class="main top_vinyl vinyl"></div>
 </div>
 </div>
 <div class="first bottom_vinyl vinyl">
 <div class="last bottom_vinyl vinyl">
 <div class="main bottom_vinyl vinyl"></div>
 </div>
 </div>
 <div class="ring_container">
 <div class="first ring">
 <div class="last ring">
 <div class="main ring"></div>
 </div>
 </div>
 </div>
 <div class="inside_container">
 <div class="first inside">
 <label>Sgt. Pepper</label><br /><span>Sgt. Pepper's Lonely Hearts Club Band<br />Lucy in the Sky with Diamonds<br />When I'm Sixty- Four<br />A Day in the Life</span>
 <div class="last inside">
 <label>Sgt. Pepper</label><br /><span>Sgt. Pepper's Lonely Hearts Club Band<br />Lucy in the Sky with Diamonds<br />When I'm Sixty- Four<br />A Day in the Life</span>
 <div class="main inside">
 <label>Sgt. Pepper</label><br /><span>Sgt. Pepper's Lonely Hearts Club Band<br />Lucy in the Sky with Diamonds<br />When I'm Sixty- Four<br />A Day in the Life</span>
 </div>
 </div>
 </div>
 </div>
 <audio class="audio" controls="" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 11500)">>
 <source src="song.mp3" type="audio/mp3" />
 </audio>
 </div>
</div>

CSS:

*{
 -webkit-text-size-adjust: none;
 -moz-text-size-adjust: none;
 line-height: normal;
 margin:0;
 padding:0;
}
body{
 background-color:#222;
}
div{
 -webkit-backface-visibility:hidden;
 -moz-backface-visibility: hidden;
 position: absolute;
}
.audio{
 display: none;
}
/* Animations */
@-webkit-keyframes arm {
 0% { 
 -webkit-transform: rotate(0deg); 
 }
 2% { 
 -webkit-transform: rotate(18deg); 
 }
 99% { 
 -webkit-transform: rotate(38deg); 
 }
 100% { 
 -webkit-transform: rotate(0deg);
 } 
}
@-moz-keyframes arm {
 0% { 
 -moz-transform: rotate(0deg);
 }
 2% { 
 -moz-transform: rotate(18deg);
 }
 99% { 
 -moz-transform: rotate(38deg);
 }
 100% { 
 -moz-transform: rotate(0deg);
 } 
}
@-webkit-keyframes spin {
 0% { 
 -webkit-transform: rotate(0deg);
 }
 100% { 
 -webkit-transform: rotate(360deg); 
 }
}
@-moz-keyframes spin {
 0% { 
 -moz-transform: rotate(0deg);
 }
 100% { 
 -moz-transform: rotate(360deg); 
 }
}
@-webkit-keyframes toggle {
 0% { 
 -webkit-transform: translateX(0); 
 }
 1% { 
 -webkit-transform: translateX(-10px); 
 background-color:red;
 }
 1.1% {
 background-color:#1EEC04; 
 }
 99%{ 
 -webkit-transform: translateX(-10px);
 }
 100% {
 background-color:#1EEC04;
 }
}
@-moz-keyframes toggle {
 0% { 
 -moz-transform: translateX(0); 
 }
 1% { 
 -moz-transform: translateX(-10px); 
 background-color:red;
 }
 1.1% {
 background-color:#1EEC04; 
 }
 99%{ 
 -moz-transform: translateX(-10px);
 }
 100% {
 background-color:#1EEC04;
 }
}
/* Container */
.content{
 width:258px;
 height:200px;
 margin:20px;
}
.cover{
 width:298px;
 height:238px; 
 z-index: 1000;
 background: -webkit-linear-gradient(
 top, 
 rgba(125,126,125,.2) 0%,
 rgba(14,14,14,.2) 100%
 ); 
 background: -moz-linear-gradient(
 top, 
 rgba(125,126,125,.2) 0%,
 rgba(14,14,14,.2) 100%
 ); 
 opacity: 1;
 border:1px solid #181818;
 box-shadow: 0 5px 0 rgba(0,0,0,.3), 0 0 100px #333;
}
.container{
 width:298px;
 height:238px;
 left:50%;
 margin-left:-149px;
 top:50%;
 margin-top:-119px;
}
.noise{
 top:0;
 bottom:0;
 right:0;
 left:0;
 background-image:url(noise.png);
 z-index: 10000;
}
/* Switch */
.switch{
 width:20px;
 height:10px;
 border-radius: 5px;
 background-color:#333;
 margin-top:180px;
 margin-left:190px;
 box-shadow:inset 0 0 2px #666;
}
.toggle{
 width:10px;
 height:10px;
 border-radius: 5px;
 background-color:red;
 margin-left:10px;
 -webkit-animation-name: toggle; 
 -webkit-animation-duration:123s;
 -webkit-animation-delay:9s;
 -webkit-animation-iteration-count:1;
 -moz-animation-name: toggle; 
 -moz-animation-duration:123s;
 -moz-animation-delay:9s;
 -moz-animation-iteration-count:1;
 box-shadow: inset 0 0 2px #000;
}
/* Arm */
.arm_container{
 width:50px;
 height:93px;
 z-index: 2;
 margin-left:185px;
 margin-top:40px;
 -webkit-animation-name: arm; 
 -webkit-animation-duration:125s;
 -webkit-animation-iteration-count:1;
 -webkit-animation-delay:10s;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-name: arm; 
 -moz-animation-duration:125s;
 -moz-animation-iteration-count:1;
 -moz-animation-delay:10s;
 -moz-animation-timing-function: ease-out;
}
.front_arm{
 width:4px;
 height:50px;
 background-color:#999;
 margin-left:37px;
 margin-top:47px;
 z-index: 2;
 -webkit-transform: rotate(27deg);
 -moz-transform: rotate(27deg);
}
.back_arm{
 width:4px;
 height:50px;
 background-color:#999;
 margin-left:48px;
 z-index: 2;
}
.thick{
 background-color:#ccc;
 width:6px;
 height:10px;
 margin-top:34px;
 margin-left:-1px;
}
.tip{
 border-left:2.5px solid transparent;
 border-right:2.5px solid transparent;
 border-top:7px solid #999;
 width:0px;
 height:0px;
 margin-top:49px;
 margin-left:0px;
}
.pivot{
 background-color:#999;
 width:10px;
 height:10px;
 border-radius: 10px;
 margin-left:45px;
 margin-top:-3px;
 z-index: 2;
 box-shadow: 0 0 0 6px #111;
}
.rest{
 width:8px;
 height:10px;
 background-color:#fff;
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 margin-left:223px;
 margin-top:101px;
 border-radius: 1px;
}
/* Center */
.center{
 width:7px;
 height: 7px;
 background-color:#ccc;
 border-radius: 10px;
 z-index: 4;
 margin-top:95px;
 margin-left:96px;
}
.small{
 width:5px;
 height: 5px;
 background-color:#222;
 border-radius: 2px;
 z-index: 5;
 margin-top:1px;
 margin-left:1px;
}
/* Vinyl */
.first
{
 -webkit-animation-name: spin; 
 -webkit-animation-duration:3s;
 -webkit-animation-iteration-count:1;
 -webkit-animation-timing-function: ease-in;
 -webkit-animation-delay:10s;
 -moz-animation-name: spin; 
 -moz-animation-duration:3s;
 -moz-animation-iteration-count:1;
 -moz-animation-timing-function: ease-in;
 -moz-animation-delay:10s;
}
.last
{
 -webkit-animation-name: spin; 
 -webkit-animation-duration:10s;
 -webkit-animation-iteration-count:1;
 -webkit-animation-delay:134s;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-name: spin; 
 -moz-animation-duration:10s;
 -moz-animation-iteration-count:1;
 -moz-animation-delay:134s;
 -moz-animation-timing-function: ease-out;
}
.main
{
 -webkit-animation-name: spin; 
 -webkit-animation-duration:1.1s;
 -webkit-animation-delay:13s;
 -webkit-animation-iteration-count:110;
 -webkit-animation-timing-function:linear;
 -moz-animation-name: spin; 
 -moz-animation-duration:1.1s;
 -moz-animation-delay:13s;
 -moz-animation-iteration-count:110;
 -moz-animation-timing-function:linear;
}
.vinyl {
 border-radius: 50%;
 width: 200px;
 height: 200px;
 box-shadow: 0 0 1px #000;
}
.top_vinyl {
 background:-webkit-linear-gradient(
 left, 
 #111111 50%, 
 #1c1c1c 50%
 );
 background:-moz-linear-gradient(
 left, 
 #111111 50%, 
 #1c1c1c 50%
 );
}
.bottom_vinyl {
 background:-webkit-radial-gradient(
 center, 
 ellipse cover, 
 #000000 0%, 
 #333333 20%,
 #000000 20%,
 #333333 40%,
 #000000 40%,
 #333333 55%,
 #000000 55%,
 #333333 70%,
 #000000 70%,
 #333333 100%
 );
 background:-moz-radial-gradient(
 center, 
 ellipse cover, 
 #000000 0%, 
 #333333 20%,
 #000000 20%,
 #333333 40%,
 #000000 40%,
 #333333 55%,
 #000000 55%,
 #333333 70%,
 #000000 70%,
 #333333 100%
 );
 opacity: .3;
}
/* Rainbow ring */
.ring_container{
 margin-top:69px;
 margin-left:70px;
}
.ring{
 height:61px;
 background-image:url(ring.png);
 width: 60px;
 background-position: center center;
 background-repeat: no-repeat;
 border-radius:30px;
}
/* Inside ring */
.inside_container{
 margin-top:115px;
 margin-left:75px;
}
.inside{
 width:50px;
 height:50px;
 background-color:#333;
 border-radius: 25px;
 font-size: 5px;
 color:#fff;
 font-family: sans-serif;
 text-align: center;
 margin-top:-40px;
}
.inside span{
 font-size: 2px;
 display: block;
 text-align: left;
 margin-top:10px;
 margin-left:8px;
}
.inside label{
 margin-top:10px;
 display: block;
}

• Malachi: is this even real code?
• Charlie: So real you could taste it, but you can't, cause it's code.

Answer 1

One of the first things that you can to do improve the HTML is to remove the <br /> tags, and to replace the <label> tags with <span> tags. Labels in HTML should only be found in forms.

To achieve the same effects that the line break tags gave you, you can use CSS with semantic class names (e.g.: .songTitle).

Additionally, I would avoid duplicate markup to achieve the difference in the record's speed in the beginning and end of the song. Applying the first, last, and main classes to the same mark-up using JavaScript would be more appropriate.

I also am not a fan of the <div>-heavy markup, but if this is something experimental I suppose it is alright for now.

Answer 2

If you are going to write HTML code, use HTML Tags

• <p> for paragraphs
• <h1> for Main Headers
• <h2> for secondary Headers
• <h3>-<h6> for other headers
• <img> for images

You should really look at using other tags and how they are used.

HTML Tags have a purpose, use them.

Something that I think you could benefit from (and myself as well) is a site called Dive Into HTML 5 this is the semantics section, but it looks like it has some really good information, I know that I will be reading it later on sometime.

Your code with the Label should look like this

<h1>Sgt. Pepper</h1>
<p>
 Sgt. Pepper's Lonely Hearts Club Band
 <br />
 Lucy in the Sky with Diamonds
 <br />
 When I'm Sixty- Four
 <br />
 A Day in the Life
</p>

Instead of like this:

<label>Sgt. Pepper</label><br /><span>Sgt. Pepper's Lonely Hearts Club Band<br />Lucy in the Sky with Diamonds<br />When I'm Sixty- Four<br />A Day in the Life</span>

The <h1> tag has an automatic break following it.

If this is a partial list of the songs on the Record you could also us an ordered list like this:

<ol>
 <li>
 Sgt. Pepper's Lonely Hearts Club Band
 </li>
 <li>
 Lucy in the Sky with Diamonds
 </li>
 <li>
 When I'm Sixty- Four
 </li>
 <li>
 A Day in the Life
 </li> 
</ol>

Each List Item will now have a number in front of it. if you don't want the numbers than use an unordered list (switch the <ol> to a <ul>) and then add a style to of text-decoration:none; (that might not be entirely correct syntax wise.)

I also think that a lot of these <div> tags need to be <img> tags instead.

---

your div tag with the class noise is going to sit on top of everything on this page too , by the way.

.noise{
 top:0;
 bottom:0;
 right:0;
 left:0;
 background-image:url(noise.png);
 z-index: 10000;
}

I didn't see anything with a higher z-index, which means this is the top item. Is that what you want? This style houses an image which means the image will cover everything else.

• Charlie: It would be beneficial if you could provide an example with these changes in use. jsfiddle.net/charlescarver/2gjvm
• Malachi: I will try to get to it this weekend if I remember
• Charlie: It's not required, but this project was a long time ago and I've more or less forgotten about it. But for the sake of completeness, I'd like to accept an answer, but only if the hypothetical changes work.
• Malachi: everything that you do is based on tags, what they tags are shouldn't make any difference. especially if the tags that are suggested are the correct tags to be using in the situation.
• chillworld: @charlie, changing tags isn't that hard to try out yourself. This is a legit review and you can upvote/accept after you tried to change your code. It is not the responsability of the reviewer to change all your code.