accéléreration matérielle animation css3

**moslem7** · 16/11/2013, 16h48

je veux accélérer le matérielle pour une animation css3 qu est ce que je peux faire ? merci pour votre aide

**rodolphebrd** · 16/11/2013, 17h03

Bonjour,

ça dépend pour quoi !

Quel est votre projet ?

Qu'avez-vous déjà réalisé.

**moslem7** · 16/11/2013, 22h24

j'ai essayé de mettre des nuages animés sur mon site web et je veux diminuer le plus possible l'utilisation de cpu merci pour votre interret

**rodolphebrd** · 16/11/2013, 22h56

Peut-on voir le code ?

**moslem7** · 16/11/2013, 23h31

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<html>
<head>
<style type="text/css">
*{ margin: 0; padding: 0;}
 
body {
	overflow: hidden;
}
 
#clouds{
	padding: 100px 0;
	background: #c9dbe9;
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
 
 
.cloud {
	width: 200px; height: 60px;
	background: #fff;
 
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
 
	position: relative; 
}
 
.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
 
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
 
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}
 
.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}
 
 
.x1 {
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}
 
.x2 {
	left: 200px;
 
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; 
 
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
}
 
.x3 {
	left: -250px; top: -200px;
 
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8;
 
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}
.x4 {
	left: 470px; top: -250px;
 
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; 
 
	-webkit-animation: moveclouds 18s linear infinite;
	-moz-animation: moveclouds 18s linear infinite;
	-o-animation: moveclouds 18s linear infinite;
}
 
.x5 {
	left: -150px; top: -150px;
 
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
 
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}
 
@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
</style>
</head>
<body>
<div id="clouds">
	<div class="cloud x1"></div>
	<div class="cloud x2"></div>
	<div class="cloud x3"></div>
	<div class="cloud x4"></div>
	<div class="cloud x5"></div>
</div>
</body>
</html>

accéléreration matérielle animation css3

Animation en CSS

Vue hybride

Discussions similaires

Partager

Partager