Click on any phrase to play the video from that point.
[CS6]
Of all the great new features in CSS3,
one of my favorites is the ability to create Transitions.
In other words--to move between 2 states of an object,
using pure CSS.
And of course, with Dreamweaver CS6,
we now support CSS3 Transitions
with the new CSS3 Transitions Panel.
Let's take a look: here I am on my Pluralist page
and as I scroll down, you can see that I have 4 images.
And each one of the 4 images has a description
about the actual product, here at the bottom of the image.
But if we select a little bit of this text
and maybe go to our Split view,
you're going to notice that, actually, there's more information--
you can see here, we have our burgundy leather jacket,
but I also have some other information:
Alice Ritter--and even the price--
and I can't actually see that information.
And that's because I've used a little bit of CSS magic--
simply Overflow Hidden--
to actually hide all of that content.
But I do want it to be displayed--
but only when you place your mouse on top of this description area,
and that's where the CSS Transitions come in.
So I'm simply going to select one of these elements--
let's just say this word, "leather", here--
and I'll open up my brand new CSS Transitions panel.
Now, as it opens, you'll notice I've already got some
Transitions that I've created for our navigation,
but I'm going to show you how the Transitions were created,
using these examples here.
The first thing that I need to note
is what is it that I want to change?
Now you'll notice that we have a class here,
called "Content".
And that is actually the >div that contains
all of this information that I'm going to want to display.
So that's what I'm looking for--is that class called Content.
So I'm going to create a new Transition
and from my Target Rule,
I'm going to show you all of the rules I have--
and, as you can see, it's quite a bit.
As we get passed our IDs,
we'll get down here to our Content Rules here,
and you'll notice there's 2 of them
because, of course, I have a Content Rule
for my desktop device.
I also have a Content Rule for my tablet device.
So I'll select one of those that I'm interested in
and simply say: okay--for my content,
when you hover over that--in other words,
not when it's active, but when it's hovered--
I want something to be triggered--what do I want to change?
And this is where I'm going to set up my properties.
I'll go down here to my Property listing and say:
well, the thing that I want to do is I want to move this up.
So I'll use the property of "Top"--
right there--and I'm going to set that value to zero.
In other words, move it up to the top of its parent container.
And I'm also going to set the bottom, as well,
because I don't want it to move up and change size.
I want it to fill out the entire area, so there we have "bottom".
Now I have 3 other options to set here.
First of all, how long should this happen?
What is the duration?
Let's just go with--let's say 1 second.
Do we want a delay?
In other words, do we want--when the user puts their mouse on top of the object,
do we want it to immediately start,
or perhaps wait a half a second or something,
in case they weren't really intending to trigger that.
Let's give it that half second--so I'll do .5 seconds there.
And how do we want it to play?
We have a number of different functions here:
linear, ease-in, ease-out.
Let's just play in a linear fashion.
With all of that, I'm going to simply say:
go ahead and create that transition for me.
Now you can see it's been adding--notice that we have a number of these
because it's added one for each one,
indicating each one of these Content areas
is going to move--oh, and look at that!
As I'm moving my mouse on top,
they, in fact, are moving.
Now, the one thing to know about the Transitions panel is
this is for your simple Transitions.
In other words, you're able to identify the one object
on the page that you want to animate--
or, if you will, Transition.
If you want to get more complex,
we've got to dive a little deeper.
So here's my problem with my animation
that I've created, so far:
I'm happy with everything animating Up,
but I would also like the Title here
to go down underneath this Decoration.
Now that means I've got to do one of these
little bit trickier animations.
So I'm going to do that, by simply using
my CSS Rules panel.
I'm going to say: I would like to create a new CSS Rule.
Now this rule that I'm going to create is a Compound Rule,
and it's going to begin just like you saw it begin before--
with the Content Class.
And when that Content Class is hovered,
I want to do something else.
I want to change the actual Description element,
and that is actually a class itself.
So that is that Description that we had highlighted before.
I want to target that
and I'm going to add that to my
Styles>Start>CSS File, where all my other rules are.
I'll say OK.
Dreamweaver then asks: okay, what is it that you would like to do?
Well, I have all of my positioning here
and, you'll notice, a brand new Transition subsection
where--just like we saw before--I can either
choose individual properties to change
or just say, in this case, I'm happy to change all of my properties.
Which property would I like to change?
The only thing that I'm interested in doing
is just changing the Top placement--
let's say to about 53 percent
down on the parent container.
And I'll go ahead and, again--back over in the Transition--
if I wanted to set a particular duration or delay, I could do so.
Let's go ahead and set that same 0.5 seconds,
and we'll leave that at a linear Transition as well--
and click OK.
Now you'll notice--when we mouse over--
you'll notice that our Title is no longer moving all the way to the Top.
It's now navigating Down.
Of course--now you'll notice, as I moved back off,
I might need to address the movement back Up.
And again, I would continue to do that,
using my CSS Rules panel and the Rules Dialogue--
or, if I feel comfortable to do that--by hand, of course.
So that's the new CSS Transitions panel
in Dreamweaver CS6.
[Adobe]
