محو شدن div با css

zhra · May 9, 2013

سلام دوستان
من یک divدارم و میخام چند ثانیه ظاهر و بعد هم محو بشه.. با jquery می تونم اما می خاستم با css این کارو انجام بدم. میشه کمکم کنید؟ حدس میزنم با opacity بشه

+Mohammad+ · May 9, 2013

این کد رو توی یک صفحه ی HTML پیاده کنید :

[HTMLS]<!DOCTYPE html>
<html>
<head>
<style>
#rect{
width:100px;
height:100px;
background:red;
animation:myfirst 5s 3s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {opacity:1;}
to {opacity:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {opacity:1;}
to {opacity:0;}
}
</style>
</head>
<body>
<div id="rect"></div>

</body>
</html>[/HTMLS]

zhra · May 9, 2013

این دستور فقط در کروم کار می کنه؟ با کروم هم امتحان کردم بعد از محو شدن دوباره ظاهر میشه

برای بقیه مرورگرها هم ms,o,moz هم قرار دادم اجرا نشد

+Mohammad+ · May 9, 2013

نه ... فقط مال کروم نیست ... روی بقیه ی مرورگرها هم می تونید با اضافه کرذن -moz- و -o- و... از کد استفاده کنید
برای این که دوباره ظاهر نشه باید از JS یا JQuery کمک بگیرید ... با CSS راهی مد نظر ندارم .. شرمنده