Animate between media query breakpoint

Question

Whats the best way to animate between css media queries?

Would it be CSS3 Transitions or jquery?

CSS

@media handheld, only screen and (max-width: 1024px) {
h1 {
font-size: 30px;
}
}
@media handheld, only screen and (max-width: 768px) {
h1 {
font-size: 10px;
}
}

Answer 1

I'd say using transitions :

h1 {
    -moz-transition   : font-size 2s;
    -webkit-transition: font-size 2s;
    -o-transition     : font-size 2s;
    transition        : font-size 2s;
}

@media handheld, only screen and (max-width: 1024px) {
    h1 {
        font-size: 30px;
    }
}
@media handheld, only screen and (max-width: 768px) {
    h1 {
        font-size: 10px;
    }
}