Can some one help me sold my problem with my transition on my List. When you hover on the text the font skips at the peak of the hover?? Why is that and how can I make it smooth all the way through the transition.
HTML
<ul class="long-lists">
<li>Arts and Humanities</li>
<li>Childcare and Early Childhood Education</li>
<li>Free 7<sup>th</sup> Grade Memberships</li>
<li>Full Day Kindergarten in West Chester</li>
<li>Jennersville Theatre Programs</li>
<li>Believe and Achieve</li>
<li>Youth Council</li>
</ul>
CSS
.long-lists li a{
font-size: 1.15em;
text-decoration: none;
color: #0060af;
font-family: Verdana, Geneva, sans-serif;
line-height: 190%;
overflow: hidden;
display: block;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}
.long-lists li a:hover{
transform: scale(1.01);
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
-ms-transform: scale(1.01);
overflow: hidden;
text-decoration: none;
color: #0089d0;
line-height: 190%;
}
Included the Codepen, http://codepen.io/anon/pen/oFHGb
Thanks
Related
I'm experiencing a firefox specific bug with a simple menu I've built
It's a ul-list that has an on-hover effect for the list items, the list items have transform:translateX(12px) applied on hover, and the text links have a negative indent applied at all times, the combination of the two create a Firefox specific bug where part of the text disappears on hover during its animation, looks like its basically being hidden by its own padding because of the negative value.
Here is a JS Fiddle as well as the code, am I missing -moz- css?
https://jsfiddle.net/CultureInspired/9435v0vy/1/
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
CSS:
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
transform: translateX(12px);
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
I've got the same issue with firefox 49.0.2, it seems like a bug.
You can solve this by using margin-left: 12px; instead of the transform you are currently using.
Here is the fix (works in firefox, chrome & ie):
body {
background: lightgray;
}
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
margin-left: 12px;
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
I have been trying to make a simple drop down animation. I want it to push the other buttons down and display simple text. I got it to work, but I wanted a webkit tween just to jazz it up a bit and I can't seem to get it to work. I don't want to use absolute positioning because I am laying it out like an outline.
Here's a sample of the HTML
<div id="ngss-main" class="post">
<div class="infoblock">
<a class="topic">Forces and Interactions
<div class="inform">
<h5>What happens if you push or pull an object harder?</h5>
<ul>
<li>Pushes and pulls have different strengths and directions</li>
<li>Pushes and pulls start, stop, change speed or direction of an object*</li>
<ul>
</div>
</a>
</div>
<br>
<div class="infoblock">
<a class="topic">Interdependent Relationships in Ecosystems
<div class="inform">
<h5>Where do animals live and why do they live there?</h5>
<ul>
<li>Animals need food, plants need water and light to live and grow</li>
<li>Living things need water, air, and resources from their environment</li>
<li>Plants and animals can change their environment</li>
<ul>
</div>
</a>
</div>
</div>
Here's the important part. The CSS
.inform {
margin: 5px;
display: none;
color: black;
font-family: 'Helvetica', sans-serif;
border:10px solid rgb(114, 145, 63);
background-color: rgb(247, 145, 60);
position: relative;
width: 500px;
top: -200px;
-webkit-animation: slide 0.5s linear;
-moz-animation: slide 0.5s linear;
-0-animation: slide 0.5s linear;
animation: slide 0.5s linear;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.inform h5 {
font-style: italic;
font-style: bold;
font-size: 18px;
}
.topic {
font-family: 'Helvetica', sans-serif;
font-style: bold;
font-size: 24px;
color: rgb(53, 78, 155);
}
.topic li{
color: black;
font-style: normal;
font-size: 16px;
}
a:hover .inform {
display: block;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
#-webkit-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
#-moz-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
#-o-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
#keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
I know it's something stupid that I'm missing. Any help is greatly appreciated.
Seems like you're looking more for Transitions, not Animations:
.inform {
margin: 5px;
color: black;
font-family:'Helvetica', sans-serif;
border:10px solid rgb(114, 145, 63);
background-color: rgb(247, 145, 60);
position: absolute;
width: 500px;
top: -200px;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ktml-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.inform h5 {
font-style: italic;
font-style: bold;
font-size: 18px;
}
.topic {
font-family:'Helvetica', sans-serif;
font-style: bold;
font-size: 24px;
color: rgb(53, 78, 155);
}
.topic li {
color: black;
font-style: normal;
font-size: 16px;
}
a:hover .inform {
top: 200px;
-webkit-transition:all 1.0s ease-in-out;
-khtml-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
You may have figured it out by now, but anyway... Have you tried adding a pseudo :hover? If not, do so and set a value for height. Now, when you hover over, the container gets stretched down and reveals any additional stuff. May also require playing around with overflow.
In Chrome and Safari, the text in this code (http://codepen.io/igdaloff/pen/cgCFt) wiggles subtly when hovered. I'd like the text to remain stable throughout the transition.
I've tried several alternative methods to accomplish this same effect (explained in this post), but the wiggle remains.
I need the text to remain vertically centered and the content to be completely fluid (percentages only). As long as those requirements are true, I'm open to any solutions. I'm using the most recent browser versions.
Thanks in advance.
HTML
<div class="work-home">
<ul>
<li>
<a href="">
<img src="..." />
<h4>Goats</h4>
</a>
</li>
</ul>
</div>
CSS
.work-home {
text-align: center;
}
.work-home li {
display: inline-block;
position: relative;
margin: 0 0 2em;
width: 100%;
}
.work-home li:hover a:before {
opacity: 1;
top: 5%;
left: 5%;
right: 5%;
bottom:5%;
}
.work-home li:hover h4 {
opacity:1;
}
.work-home img {
width: 100%;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.work-home a:before {
content:"";
display:block;
opacity: 0;
position: absolute;
margin: 0;
top:0;
right:0;
left:0;
bottom:0;
background-color: rgba(0, 160, 227, 0.88);
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
.work-home h4 {
display: block;
padding: 0;
margin:0;
font-family: helvetica, sans-serif;
font-size: 4em;
color: #ffffff;
position:absolute;
top:50%;
margin-top:-.8em;
text-align:center;
width:100%;
z-index:1;
opacity:0;
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
Im having a problem inside of Chrome only, tested this inside of Opera, FF, Safari and it all works fine.
I know there was a bug with Chrome 17 with transitions on visited links so I even included that thought to be fix
There is still not animation for the transition on hover for border-bottom.
any clues? am I just not seeing something? I've read around and it all seems to be talking about the color of the text, while i'm trying to transition in the border-color.
I tried to animate in border-bottom from none to 1px solid #9ecd41 but found that in all browsers except firefox had a funky jagged animation where it kinda bounced.
any help would be awesome, attached is the code i'm working with.
Ok here is my html
<nav>
<ul class="nav">
<li>ABOUT</li>
<li>SERVICES</li>
<li>MEDIA</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
And here is my CSS
nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}
ul.nav {
width: auto;
height: auto;
overflow: visible;
}
.nav > li {
display: inline-block;
margin-right: 20px;
}
.nav > li:last-child {
margin-right: 5px;
}
/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}
.nav > li > a:active {
border-bottom: 1px solid #f96d10;
}
Just styled the <li> the way I would of styled the li with widths/heights/padding/border etc and then just styled the link to fill the li and just styled the links colour and font properties. Chrome has small bug on border-bottom for link transitions
This aught to be an easy fix.
As far as I can see your problem lies by where you put the transition in.
With chrome it needs to be added to the at most parent.
Try adding it here:
.nav > li {
display: inline-block;
margin-right: 20px;
}
Also add the declaration for the -webkit- elements
for ex.
.nav > li {
display: inline-block;
margin-right: 20px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: ease-in;
}
See if this works and if not I'll try to build something similar and work on a solution.
I had this problem with Bootstrap 4 navbar component. My menu links had border-bottom and starting from the second one, all were invisible during menu opening on mobile.
Fixed it with transform: rotate(0); on the element with the border-bottom.
Okay, so I can't figure out why this isn't working.
The hover effect with the fade in doesn't seem to be applying to this.
css
.panel_button {
}
.panel_button a {
webkit-transition: all 10.0s ease;
-moz-transition: all 10.0s ease;
transition: all 10.0s ease;
background-color: #000;
display: block;
width: 50%;
height: 160px;
color: #000099;
font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}
Header page
<div class="panel_button" style="display: visible;"> BLOG </div>
The website where this code is implemented is at niu-niu.org
Thank you!
Your webkit-transition: all 10.0s ease; is missing the dash at the beginning. Change it to this:
-webkit-transition: all 10.0s ease;