CSS Animation Not Working

1

Hi, I’m trying to do a simple CSS animation, but it’s not working. Can someone help me?

https://jsfiddle.net/nanquim/45baoc15/

or…

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Animações</title>
		<link href="css/style.css" rel="stylesheet">
	</head>
	
	<body>
	<h1>Bem vindo!</h1>

	</body>	
</html>

CSS:

h1{
	-webkit-animation: appear 5s 0 linear; 
	animation: appear 5s 0 linear; 
	color: #000;
	font-size: 1.4em;
	text-align: center;
	transform: scale(1.2); 
	transform-origin: 50% 50%; 
}
@-webkit-keyframes appear { 
	0% { opacity: 0; transform: scale(2); } 
	70% { opacity: 1; transform: scale(1); } 
	100% { transform: scale(1.2); } 
} 

@keyframes appear { 
	0% { opacity: 0; transform: scale(2); } 
	70% { opacity: 1; transform: scale(1); } 
	100% { transform: scale(1.2); } 
}

Do I still need webkits???

2

Can you explain what your code is doing?

3

Looks like you can’t mix animation and transform on the same element.

See example: https://output.jsbin.com/jexazep

1 Like
4

Barely, cause I’m following a book…

h1 should start with double size
at 70% opacity and size should normalize
When animation is finished, it should go back to what it was at the beginning

Thats the image I have from the book…

5