Avatar of jensjakobsen
jensjakobsen
Flag for Denmark asked on

CSS3 - transitions

Hi

I have created a very simple HTML page with some very simple CSS3 properties in it.

Basically I want the page to act and perform like it does in Mozilla Firefox/Safari - but for some reason Chrome stands out.

Please take a look at http://bitspand.dk/csstest.html

When loading the page in these browsers - this is what happens:

Safari, Firefox: Loading the page shows no animation. Only when I hover the mouse over the black area with the text, then a transition comes alive - just like I want it.

Chrome: Loading the page starts with an animation - where the black area slides in from left to bottom, and then waits for the user to hover their mouse over the black area.

I DON'T WANT THE ANIMATION WHEN THE PAGE LOADS :(

Here is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/csstest.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="transition">
<div class="content">
<div class="contentTXT">Halloje - dette er en test</div>
<div class="contentTXT">Halloje - dette er en test</div>
<div class="contentTXT">Halloje - dette er en test</div>
<div class="contentTXT">Halloje - dette er en test</div>
<div class="contentTXT">Halloje - dette er en test</div>
<div class="contentTXT">Halloje - dette er en test</div>
<div class="contentTXT">Halloje - dette er en test</div>
<div class="contentTXT">Halloje - dette er en test</div>
</div>
</div>

</body>
</html>

Open in new window


Here is my CSS code:
@charset "utf-8";
/* CSS Document */

.transition {
	z-index: 1;
	background-color: #ffffff;
	background-image:url(../images/CRW_2063.jpg);
	float: left;
	height: 450px;
	width: 700px;
	position: relative;
	overflow:hidden;
}

.content {
	z-index: 2;
	position: relative;
	height: 450px;
	width: 700px;
	top: 350px;
	background-color: #000;
	opacity: 0.6;
	filter: alpha(opacity = 60);
	overflow: hidden;
	-webkit-transition: all 1s linear 0.5s;
	-moz-transition: all 1s linear 0.5s;
	-ms-transition: all 1s linear 0.5s;
	-o-transition: all 1s linear 0.5s;
	transition: all 1s linear 0.5s;
}

.contentTXT {
	position:relative;
	float:left;
	width:700px;
	height:50px;
	font-family: Arial;
	font-size: 30px;
	font-color: #FFF;
	z-index: 3;
	text-align: center;
	vertical-align: central;
	color: #FFF;
}
.content:hover {
	top: 0px;
	bottom: 0px;
}

Open in new window

CSS

Avatar of undefined
Last Comment
jensjakobsen

8/22/2022 - Mon
Kyle Hamilton

try using the html5 doctype and see if that helps.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link href="css/csstest.css" rel="stylesheet" type="text/css" />
</head>
jensjakobsen

ASKER
It worked!

Why did it work?
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
jensjakobsen

ASKER
Fix and explanation - thx.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck