Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: PHP
How to animate text via CSS. I am trying to use hover effect but not happinin please help.
 
[Edit]Shouting removed[/Edit]
Posted 22-Mar-13 10:35am
Edited 22-Mar-13 10:37am
ProgramFOX127.7K
v2
Comments
ryanb31 at 22-Mar-13 15:36pm
   
Why are you yelling?
ryanb31 at 22-Mar-13 15:37pm
   
How can we help if you do not post the relevant code? What can we do?
ProgramFOX at 22-Mar-13 15:38pm
   
The subject of your question has nothing to do with your question. Please update your subject or your question.

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hello Rajneesh,
 
Here is a small sample if it's do be done using pure css.
<!DOCTYPE html>
<html>
<head>
<style>
p:hover {font-weight:bold;}
p:hover b {color: #f00;}
</style>
</head>
<body>
 
<p>Mouse over to make me <b>Bold</b></p>
 
</body>
</html>
Here is another example but usable only in CSS3 compliant browsers.
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
 
@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
 
@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
 
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
 
p:hover {font-weight:bold; 
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
animation-name: shake;
}
p:hover b {color: #f00;}
</style>
</head>
<body>
<p>Mouse over to make me <b>Bold</b></p>
</body>
</html>
Regards,
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 587
1 Sergey Alexandrovich Kryukov 479
2 Maciej Los 305
3 Mathew Soji 195
4 BillWoodruff 170
0 OriginalGriff 7,356
1 Sergey Alexandrovich Kryukov 6,777
2 DamithSL 5,461
3 Manas Bhardwaj 4,916
4 Maciej Los 4,475


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 22 Mar 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100