CSS3 Animation: How to give sliding shine to text




CSS3 Animation: How to give sliding shine to text

We have seen in i-phones how the shine slides over the text,now we are going to create the same effect using CSS3 animations and gradient technique.





CSS3 animations using @keyframes Rule


To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.









BASIC HTML



<html>
<head>
<title>Shine</title>


<style type="text/css" >
.shine
{
font-size: 60px;
margin:0 auto;
width:750px;
font-family:sans-serif;

}
.shine
{
background-color:#222 ;
background:-webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.7, #fff));
background-repeat:no-repeat;
-webkit-background-size: 100px;
color: rgba(255, 255, 255, 0.2);
-webkit-background-clip: text;
-webkit-animation-name: shining;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shining
{
0%
{
background-position: left top;
}
100%
{
background: right bottom;
}
}
</style>


</head>
<body bgcolor="black">

<p class="shine">web designing tutorials</p>

</body>
</html>