css3 - CSS color transition triggers multiple animations when loading the website -


this first question in forum if it's not explained, feel free ask me more details.

i have color transition in links on navbar, triggers when hover mouse on them. work wells, problem when website loads, elements began resize or move initial positions.

css

nav{     height: 80px;     width: 100%;     background-color: rgba(250,250,250,1);     font-size: 13px;     border-bottom: 1px solid #d8d8d8;     color: #6e6e6e;     position: fixed;     margin-top: -80px; }  nav a{     padding: 20px 20px;     line-height: 80px;     -webkit-transition: 0.8s;     transition: 0.8s;    }  nav a:hover{     color:#00bfff; } 

update

i have tried make jsfiddle problem, when css , html same seem work correctly on demo

i have changed transition property all color. has solved problem partially, since elements don't move when page loads, problem links include color transition, when website loads, show initial blue color (inexistent in css) taking transition time change correct color. initial blue color similar visited links standard color (but have used selector a:visited without positive result.

this happens on firefox.

as due low reputation can't post images, have taken blue initial tone: rgb (6,6,231)

you need animate color:

-webkit-transition: color 0.8s; transition: color 0.8s;   

note change all color only.

note 2 can do

transition: color 0.8s, height 0.2s ease-out, opacity 1s linear 0.5s;  

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -