CSS3 « Le Blog de Webinnov

Effet sur image

administrateur

Le 13 janvier 2016 à 18 h 09 min

Du plus bel effet

Créé par David LAURENT | TMI | Webinnov™

Commentaires fermés classé dans : CSS3,Javascript

@keyframes translate – Animation en pur Css3

administrateur

Le 2 juin 2015 à 22 h 45 min

Créé par David LAURENT | TMI | Webinnov™

Commentaires fermés classé dans : CSS3

@Keyframes – Opacity

administrateur

Le 2 juin 2015 à 21 h 25 min

Code Css

.objet{
	position:absolute;
	z-index:30;
	width:270px;
	height:155px;
	background-image: url(../img/*.png);
	left: *px;
	top: *px;
	background-repeat: no-repeat;
	opacity:0;
	/* global */
    animation-delay:6s;
	animation-duration:3.2s;
	animation-iteration-count:1;
	animation-fill-mode:both;
	animation-name:object;
}

.objet{

position:absolute;

z-index:30;

width:270px;

height:155px;

left: *px;

top: *px;

background-repeat: no-repeat;

opacity:0;

/* global */

animation-delay:6s;

animation-duration:3.2s;

animation-iteration-count:1;

animation-fill-mode:both;

animation-name:object;

}

@-webkit-keyframes object {
  0%   { opacity: 0; }
  100% { opacity: 1; }

}

@-webkit-keyframes object {

0% { opacity: 0; }

100% { opacity: 1; }

}

Créé par David LAURENT | TMI | Webinnov™

Commentaires fermés classé dans : CSS3

Transformations CSS3 : Animation : translate

administrateur

Le 20 juin 2014 à 22 h 23 min

Animation:translate

Code Css pour le 1ère avion

.avion1{
	position:absolute;
	width:164px;
	height:164px;
	margin-left:-400px;
	margin-top:-110px;
	top:75px;
	bottom:0px;
	left:1550px;
	z-index:4;
	-moz-animation:translate 5s linear infinite;
	-webkit-animation:translate 5s linear infinite;
	background-image: url('/avion_1.png');
	background-repeat: no-repeat;
 }

.avion1{

position:absolute;

width:164px;

height:164px;

margin-left:-400px;

margin-top:-110px;

top:75px;

bottom:0px;

left:1550px;

z-index:4;

-moz-animation:translate 5s linear infinite;

-webkit-animation:translate 5s linear infinite;

background-repeat: no-repeat;

}

Code Css pour le 2ème avion

.avion2{
	position:absolute;
	width:256px;
	height:256px;
	margin-left:-400px;
	margin-top:-100px;
	top:124px;
	bottom:0px;
	left:1100px;
	z-index:5;
	-moz-animation:translate 5s linear infinite;
	-webkit-animation:translate 5s linear infinite;
	background-image: url('/avion_2.png');
 }