Compare Revisions

transition-delay

Change Revisions

Revision 317863:

Revision 317863 by teoli on

Revision 342371:

Revision 342371 by teoli on

Title:
transition-delay
transition-delay
Slug:
CSS/transition-delay
CSS/transition-delay
Tags:
"css", "CSS Reference"
"css", "CSS Reference"
Content:

Revision 317863
Revision 342371
tt72    <div>
73      <div id="delay_0_5s" style="width:251px;display:inline-bloc
 >k;margin-right:1px;margin-bottom:1px">
72    <p>74        <p>
73      There are several examples of CSS transitions included in t75          <code>transition-delay: 0.5s</code>
>he main <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS trans 
>itions">CSS&nbsp;transitions</a> article. 
74    </p>76        </p>
77        <div style="display:none">
78          <pre class="brush:html">
79 &lt;div class="parent"&gt;
80  &lt;div class="box"&gt;Lorem&lt;/div&gt;
81&lt;/div&gt;
82  
83</pre>
84          <pre class="brush:css;">
85.parent { width: 250px; height:125px;}
86.box {
87    width: 100px;
88    height: 100px;
89    background-color: red;
90    font-size: 20px;
91    left: 0px;
92    top: 0px;
93    position:absolute;
94    -webkit-transition-property: width height background-color fo
 >nt-size left top color;
95    -webkit-transition-duration:2s;
96    -webkit-transition-delay:0.5s;
97    -webkit-transition-timing-function: linear;
98    transition-property: width height background-color font-size 
 >left top color;
99    transition-duration:2s;
100    transition-delay:0.5s;
101    transition-timing-function: linear;
102}
103.box1{
104    width: 50px;
105    height: 50px;
106    background-color: blue;
107    color: yellow;
108    font-size: 18px;
109    left: 150px;
110    top:25px;
111    position:absolute;
112     -webkit-transition-property: width height background-color f
 >ont-size left top color;
113    -webkit-transition-duration:2s;
114    -webkit-transition-delay:0.5s;
115    -webkit-transition-timing-function: linear;
116    transition-property: width height background-color font-size 
 >left top color;
117    transition-duration:2s;
118    transition-delay:0.5s;
119    transition-timing-function: linear;
120}
121</pre>
122          <pre class="brush:js">
123function updateTransition() {
124  var el = document.querySelector("div.box");
125   
126  if (el) {
127    el.className = "box1";
128  } else {
129    el = document.querySelector("div.box1");
130    el.className = "box";
131  }
132   
133  return el;
134}
135 
136var intervalID = window.setInterval(updateTransition, 7000);
137</pre>
138        </div>
139        <div>
140          {{EmbedLiveSample("delay_0_5s",275,150)}}
141        </div>
142      </div>
143      <div id="delay_1s" style="width:251px;display:inline-block;
 >margin-right:1px;margin-bottom:1px">
144        <p>
145          <code>transition-delay: 1s</code>
146        </p>
147        <div style="display:none">
148          <pre class="brush:html">
149 &lt;div class="parent"&gt;
150  &lt;div class="box"&gt;Lorem&lt;/div&gt;
151&lt;/div&gt;
152  
153</pre>
154          <pre class="brush:css;">
155.parent { width: 250px; height:125px;}
156.box {
157    width: 100px;
158    height: 100px;
159    background-color: red;
160    font-size: 20px;
161    left: 0px;
162    top: 0px;
163    position:absolute;
164     -webkit-transition-property: width height background-color f
 >ont-size left top color;
165    -webkit-transition-duration:2s;
166    -webkit-transition-delay:1s;
167    -webkit-transition-timing-function: linear;
168    transition-property: width height background-color font-size 
 >left top color;
169    transition-duration:2s;
170    transition-delay:1s;
171    transition-timing-function: linear;
172}
173.box1{
174    width: 50px;
175    height: 50px;
176    background-color: blue;
177    color: yellow;
178    font-size: 18px;
179    left: 150px;
180    top:25px;
181    position:absolute;
182    -webkit-transition-property: width height background-color fo
 >nt-size left top color;
183    -webkit-transition-duration:2s;
184    -webkit-transition-delay:1s;
185    -webkit-transition-timing-function: linear;
186    transition-property: width height background-color font-size 
 >left top color;
187    transition-duration:2s;
188    transition-delay:1s;
189    transition-timing-function: linear;
190}
191</pre>
192          <pre class="brush:js">
193function updateTransition() {
194  var el = document.querySelector("div.box");
195   
196  if (el) {
197    el.className = "box1";
198  } else {
199    el = document.querySelector("div.box1");
200    el.className = "box";
201  }
202   
203  return el;
204}
205 
206var intervalID = window.setInterval(updateTransition, 7000);
207</pre>
208        </div>
209        <div>
210          {{EmbedLiveSample("delay_1s",275,150)}}
211        </div>
212      </div>
213      <div id="delay_2s" style="width:251px;display:inline-block;
 >margin-right:1px;margin-bottom:1px">
214        <p>
215          <code>transition-delay: 2s</code>
216        </p>
217        <div style="display:none">
218          <pre class="brush:html">
219 &lt;div class="parent"&gt;
220  &lt;div class="box"&gt;Lorem&lt;/div&gt;
221&lt;/div&gt;
222  
223</pre>
224          <pre class="brush:css;">
225.parent { width: 250px; height:125px;}
226.box {
227    width: 100px;
228    height: 100px;
229    background-color: red;
230    font-size: 20px;
231    left: 0px;
232    top: 0px;
233    position:absolute;
234    -webkit-transition-property: width height background-color fo
 >nt-size left top color;
235    -webkit-transition-duration:2s;
236    -webkit-transition-delay:2s;
237    -webkit-transition-timing-function: linear;
238    transition-property: width height background-color font-size 
 >left top color;
239    transition-duration:2s;
240    transition-delay:2s;
241    transition-timing-function: linear;
242}
243.box1{
244    width: 50px;
245    height: 50px;
246    background-color: blue;
247    color: yellow;
248    font-size: 18px;
249    left: 150px;
250    top:25px;
251    position:absolute;
252    -webkit-transition-property: width height background-color fo
 >nt-size left top color;
253    -webkit-transition-duration:2s;
254    -webkit-transition-delay:2s;
255    -webkit-transition-timing-function: linear;
256    transition-property: width height background-color font-size 
 >left top color;
257    transition-duration:2s;
258    transition-delay:2s;
259    transition-timing-function: linear;
260}
261</pre>
262          <pre class="brush:js">
263function updateTransition() {
264  var el = document.querySelector("div.box");
265   
266  if (el) {
267    el.className = "box1";
268  } else {
269    el = document.querySelector("div.box1");
270    el.className = "box";
271  }
272   
273  return el;
274}
275 
276var intervalID = window.setInterval(updateTransition, 7000);
277</pre>
278        </div>
279        <div>
280          {{EmbedLiveSample("delay_2s",275,150)}}
281        </div>
282      </div>
283      <div id="delay_4s" style="width:251px;display:inline-block;
 >margin-right:1px;margin-bottom:1px">
284        <p>
285          <code>transition-delay: 4s</code>
286        </p>
287        <div style="display:none">
288          <pre class="brush:html">
289 &lt;div class="parent"&gt;
290  &lt;div class="box"&gt;Lorem&lt;/div&gt;
291&lt;/div&gt;
292  
293</pre>
294          <pre class="brush:css;">
295.parent { width: 250px; height:125px;}
296.box {
297    width: 100px;
298    height: 100px;
299    background-color: red;
300    font-size: 20px;
301    left: 0px;
302    top: 0px;
303    position:absolute;
304    -webkit-transition-property: width height background-color fo
 >nt-size left top color;
305    -webkit-transition-duration:2s;
306    -webkit-transition-delay:4s;
307    -webkit-transition-timing-function: ease-in-out;
308    transition-property: width height background-color font-size 
 >left top color;
309    transition-duration:2s;
310    transition-delay:4s;
311    transition-timing-function: ease-in-out;
312}
313.box1{
314    width: 50px;
315    height: 50px;
316    background-color: blue;
317    color: yellow;
318    font-size: 18px;
319    left: 150px;
320    top:25px;
321    position:absolute;
322    -webkit-transition-property: width height background-color fo
 >nt-size left top color;
323    -webkit-transition-duration:2s;
324    -webkit-transition-delay:4s;
325    -webkit-transition-timing-function: ease-in-out;
326    transition-property: width height background-color font-size 
 >left top color;
327    transition-duration:2s;
328    transition-delay:4s;
329    transition-timing-function: ease-in-out;
330}
331</pre>
332          <pre class="brush:js">
333function updateTransition() {
334  var el = document.querySelector("div.box");
335   
336  if (el) {
337    el.className = "box1";
338  } else {
339    el = document.querySelector("div.box1");
340    el.className = "box";
341  }
342   
343  return el;
344}
345 
346var intervalID = window.setInterval(updateTransition, 7000);
347</pre>
348        </div>
349        <div>
350          {{EmbedLiveSample("delay_4s",275,150)}}
351        </div>
352      </div>
353    </div>

Back to History