Jump to content

.London Domains - £4
Photo

Transition not working as i'd like it to.

-webkit-transition animation design code -moz- compatability help

  • Please log in to reply
6 replies to this topic

#1 mrblundell

mrblundell
  • Member
  • Newbie
  • 4 posts

Posted 15 March 2015 - 00:29

Can anyone help me out please?
I'm working on a project and am stuck on a transision with IE and Chrome.
I've got it working as i want it to in Firefox.
but can't get it to work how i want in the other browsers.
I want it to animate the Div's leaving the viewable area in IE and chrome
the same way it does in firefox. can anyone help?
also how would i link back to the "homepage" index.html without any divs visable?

 

\/ below is the test page i've made. \/

 

<html>
<head>
<style>
body {
  overflow:hidden;
  }
}
div {
    -webkit-transition: width 4s, height 4s,
    -webkit-transform 4s;
    transition: width 4s, height 4s, transform 4s;
}
div {
    transition:all 4s ease;
    /* I THINK THE ERROR IS HERE */
}

div:target {
    -webkit-animation-name: CONTENT_SLIDE;
    -webkit-animation-duration: 3.5s;
    -webkit-animation-fill-mode: both;
    animation-name: CONTENT_SLIDE;
    animation-duration: 3.5s;
    animation-fill-mode: both;
}

@-webkit-keyframes CONTENT_SLIDE {
    0%   {}
    100% {top:0%; left:0%; width:100%; height:100%;}
}

@keyframes CONTENT_SLIDE {
    0%   {}
    100% {top:0%; left:0%; width:100%; height:100%;}
}
div#DvZero {
  background: red;
  position: absolute;
  z-index: 1;
  left: 100%;
  top: 0px;
  width: 0%;
  height: 100%;
}
div#DvOne {
  z-index: 2;
  background: yellow;
  position: absolute;
  left: -100%;
  top:0%;
  height: 100%;
  width: 0px;"
}
div#DvTwo {
  z-index: 3;
  background: green;
  position: absolute;
  left: 100%;
  top:0%;
  height: 100%;
  width: 0px;"
}
div#DvThree {
  background: pink;
  position: absolute;
  z-index: 4;
  left: -100%;
  top:0%;
  height: 100%;
  width: 0px;
}
</style>
</head>
<body>
This is the background (ie index.html)<br>
Link to <a href="#DvZero">DvZero</a><br>
<br>

<!-- DvZero -->
<div id="DvZero">
This is "DvZero" <br>
Link to <a href="#DvOne">DvOne</a>
 </div>

 <!-- DvOne -->
<div id="DvOne">
This is "DvOne" <br>
Link to <a href="#DvTwo">DvTwo</a>
</div>

<!-- DvTwo -->
<div id="DvTwo">
This is "DvTwo" <br>
Link to <a href="#DvThree">DvThree</a>
</div>

<!-- DvThree -->
<div id="DvThree">
This is "DvThree" <br>
Link to <a href="#DvZero">DvZero</a>
</div>
</body>

Attached Files


Edited by mrblundell, 15 March 2015 - 23:22.

  • 0

#2 brightonmike

brightonmike
  • Global Mod
  • 2,149 posts

Posted 15 March 2015 - 08:20

I can't make sense of code like that - please go and make a CodePen. Tools like CodePen exist precisely for this reason - they allow you to test out and debug snippets of code without having to mockup a whole web page.

 

Some things I noticed though:

 

  • You don't use classes but instead target the div element directly.
  • Your vendor prefixes are a total mess - either missing or incomplete. Tools like Autoprefixer (available on CodePen) can help with this, you won't need to write prefixes anymore.
  • Your base div styles are inline. Dude, we don't do this anymore. Use classes and put all your styles either in the head or a style sheet.

 

Please also go through your post and amend the formatting.

 

I'm happy to help you but you kinda need to help me help you :)


  • 1

http://michaelgunner.co.uk/

 

Awesome free web meet up in Surrey: http://418conf.co.uk/


#3 mrblundell

mrblundell
  • Member
  • Newbie
  • 4 posts

Posted 15 March 2015 - 23:24

will this link to the CodePen explain what i mean? it works well in firefox but not in internet explorer

http://codepen.io/anon/pen/NPErep

i'm currently using note pad to write this. how do i make CodePed correct it? or could you help? i'd like to learn more.


  • 0

#4 mrblundell

mrblundell
  • Member
  • Newbie
  • 4 posts

Posted 17 March 2015 - 01:03

Thanks for your help. I'd only put the style inline to make it clearer as to what was happening. I'm sorry for you that you can't make sence of code like this. iv'e got it sorted now. going to do it in a different way. thanks for the heads up about codepen its nice to have it all on one screen.but i find having the syle css open on one monitor and the index html open on the other screen, both in notepad is the best way for me to work then i just TaB between Moz, IExplorer and chrome. the prefixes are somthing new to me ive now read many tutorials now and think i've nailed it. I much perfer to understand how and why so keep to notepad. Don't realy like code genarators like autoprefixer I also use dreamweaver but only when i need a link map over an image. if you're intrested i'll put a link to the finished site here once it's done.


  • 0

#5 rbrtsmith

rbrtsmith
  • Member
  • Newbie
  • 20 posts

Posted 17 March 2015 - 06:50

I can't make sense of code like that - please go and make a CodePen. Tools like CodePen exist precisely for this reason - they allow you to test out and debug snippets of code without having to mockup a whole web page.

 

Some things I noticed though:

 

  • You don't use classes but instead target the div element directly.
  • Your vendor prefixes are a total mess - either missing or incomplete. Tools like Autoprefixer (available on CodePen) can help with this, you won't need to write prefixes anymore.
  • Your base div styles are inline. Dude, we don't do this anymore. Use classes and put all your styles either in the head or a style sheet.

 

Please also go through your post and amend the formatting.

 

I'm happy to help you but you kinda need to help me help you :)

 

This is good advice.  I'd only add that it can be good to style element selectors but only as a global style, say you want every h1 to have a specifict font-size and weight.  But of course it would be madness to set a transition on every single div.

 

Also in terms of performance: css properties differ in their animation performance.  Properties like left, top, width, height etc have poor animation performance as they force a full page repaint for each iteration of the animation.  Instead try to stick to animating properties like transforms opacity etc.  Even better is to animate translations using translate3d as this forces the browser create a new composite layer so only this will be repainted rather than the entire page.


Edited by rbrtsmith, 17 March 2015 - 06:51.

  • 0

Robert, Senior Front-end Developer |  follow me on Twitter: @robertwilliam_s | Follow my blog at http://rbrtsmith.com


#6 mrblundell

mrblundell
  • Member
  • Newbie
  • 4 posts

Posted 21 March 2015 - 17:30

Thanks for the Advice, I read some other forum posts and decided to learn it properly  so I,ve been to the Libary and got some books on both CSS and Javascript, Books are hard tho, none of the links work lol


  • 0

#7 rbrtsmith

rbrtsmith
  • Member
  • Newbie
  • 20 posts

Posted 22 March 2015 - 07:54

I'd recommend resources like TreeHouse and CodeSchool as opposed to books, books quickly go out of date, whereas these resources are continually updated.  It can also be easier to learn through the screencasts and code challenges.  That said:  there are some great books but you have to know what you are looking for, equally there are bad books just like there are bad websites.

 

For JavaScript if you insist on a book a good beginners introduction is Eloquent JavaScript.  After that Crockford's JavaScript The Good Parts is one of the best JavaScript publications out there, but it's not aimed at absolute beginners.


Edited by rbrtsmith, 22 March 2015 - 07:55.

  • 1

Robert, Senior Front-end Developer |  follow me on Twitter: @robertwilliam_s | Follow my blog at http://rbrtsmith.com






Also tagged with one or more of these keywords: -webkit-transition, animation, design, code, -moz-, compatability, help

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users